Custom widget: View PDF and ODT/ODF files directly in the browser

Hi everyone,

I’ve made a widget using the amazing viewerJS component. It enables you to view PDF and ODT/ODF files from your Grist attachments directly in the browser. You can find a working demo here.

To include the widget in your project, use the following URL: https://tomnitschke.github.io/gristwidgets/viewerjs

The source code may be found here.

Let me know how it goes. Have fun! :smiley:

5 Likes

In your demo, the ODT file works right, but the PDF viewer is not working.

I can’t scroll right or down to see the whole first page.
Fullscreen button doesn´t work either.
Only presentation button works. But after you enter presentation mode, you can´t exit it (X button doesn´t work)
Tried it with Chrome and Edge, so it doesn´t seem to be the browser.

You’re right, fullscreen and presentation mode are buggy. I’m not sure I can fix that. At least for presentation mode, you can simply select another record to get the normal view back.

As for the PDF issue, that’s because for that record, the zoom mode is set to ‘page-actual’. Try setting it to ‘auto’ instead and it should work!

ah, ok. I would have to download the document
image

so, is that column a list of options?

so, is that column a list of options?

No, it’s just text, but now you mention it, a choice field makes much more sense. I just changed it.

This is really great!

A lot of user are developing wonderful widgets.
I wish there was a centralized github repository for these experimental widgets (grist-widget-unstable?) and their documentation, to avoid losing track of all this good work.

Shall I open an issue?

5 Likes

@Emanuele_Gissi Good idea! Gets my vote!

Hello!

I’ve been using this custom widget to display and manipulate documents through attachments, and it has been working great for a long time. However, since updating to Grist Version 1.7.5 a few days ago, the widget no longer works.

The Error:

When my custom widget (hosted on widget.example.com) tries to access attachment files from my Grist instance (grist.example.com), I get the following CORS error:

Access to XMLHttpRequest at 'https://grist.example.com/o/docs/api/docs/{docId}/attachments/{attachmentId}/download?auth={token}' 
from origin 'https://widget.example.com' has been blocked by CORS policy: 
Permission was denied for this request to access the `unknown` address space.

Setup:

  • Grist version: 1.7.5
  • Self-hosted on Yunohost with nginx reverse proxy
  • Widget hosted on a different subdomain on the same server
  • Both domains use HTTPS with valid certificates

What I’ve tried (without success):

  1. Added comprehensive CORS headers to nginx configuration for the Grist domain:
add_header 'Access-Control-Allow-Origin' $http_origin always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, HEAD, PUT, DELETE' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Max-Age' 1728000 always;
  1. Added Private Network Access header (as the error mentions “unknown address space”):
add_header 'Access-Control-Allow-Private-Network' 'true' always;
  1. Applied the same CORS configuration to the widget’s nginx configuration

  2. Verified nginx configuration is valid and reloaded

Questions:

  1. Did something change in Grist 1.7.5 regarding CORS handling or attachment downloads? Can’t find anything here
  2. Is there a Grist configuration option to allow cross-origin requests from specific domains?
  3. Has anyone else experienced this issue with custom widgets accessing attachments after the recent update?

The widget was working perfectly before the update, so I suspect this might be related to changes in how Grist handles CORS or the attachment download API.

Any help would be greatly appreciated!


Note: This “unknown address space” error is related to the browser’s Private Network Access security feature. It typically occurs when a public website tries to access resources that the browser considers to be on a private/local network. This could be a change in how Grist responds to preflight OPTIONS requests. Also I am reflecting on this widget setup, I’m not sure if it is a good way of building resilient software. Please allow me to git clone extensions in grist directly!