1

I'm trying to display PDF in a filepond instance.
I'm working on Vue2 with the following dependencies

"filepond": "^4.30.4",
"filepond-plugin-pdf-preview": "^1.0.4"

In a page component I setup the filepond as follows

<setup>
    ...

    // Import FilePond component 
    import vueFilePond, { setOptions } from "vue-filepond";
    // Import FilePond styles
    import "filepond/dist/filepond.min.css";
    // Import FilePond plugins
    import "filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.css";

    // Create filepond 
    const FilePond = vueFilePond(FilePondPluginPdfPreview);
    setOptions({
         allowPdfPreview: true,
         pdfComponentExtraParams: 'toolbar=0&view=fit&page=1'
    });

    ...
</setup>

Also I want 3 PDF inlines so :

<style>
    .filepond--item {width: calc(33% - 0.5em);}
</style>

Now the problem I'm having is the following with Firefox and Internet Explorer : the view=fit doesn't work.

Firefox (don't see the bottom of the PDF)

Firefox

Microsoft Edge (I don't see much of the PDF)

MicrosoftEdge

And what I'd like is to have the exact same result as the one obtained in Chrome Chrome

Is there a workaround ? Thx

orville
  • 51
  • 6

1 Answers1

1

Browser views are very much down to user settings

here are Edge variables and FireFox side by side and we can see there is no one fits both, so the best solution needs detect browser and use different settings accordingly.

Chrome uses #view=FitV&page=1
Firefox uses #zoom=FitV&page=1

enter image description here

Note edge on the left is affected more by user settings as described in https://stackoverflow.com/a/72384838/10802527

K J
  • 8,045
  • 3
  • 14
  • 36