hrynko / vue-pdf-embed Goto Github PK

View Code? Open in Web Editor NEW

634.0 634.0 102.0 204 KB

PDF embed component for Vue 2 and Vue 3

Home Page: https://npmjs.com/package/vue-pdf-embed

License: MIT License

Vue 56.56% Shell 0.39% HTML 1.25% TypeScript 41.79%

pdf vue

vue-pdf-embed's People

Contributors

Stargazers

Watchers

Forkers

kevinflou cyoann engraffo p3v9d5ui git-thinh dcoyt julianmateu danielfelipe113 ghaaaaa abdulmlik consultaazul david0718 mweimerskirch geschwirr panboren elegye sigeshitou canees stan-tba pandaiiz goston tomhoma arkokoley jimmy-ajia fossprime fsws hyunwoo-kr calvinkehl kandyjam boomerstan ez8-lab aidabo lailonghui ccwalkerjm jarod-bee mmxhello ppalonebot itvita yngrdyn artesa arahvin royswale duyjohannes0870 thusithawijethunga ithot-all ydah john5 superlazycoder sushi2all ceda sabeurmohamedamin sandor-szabo jeremyjumeau cdw-diataal nicekr m4rcoperuano rhosseinr quyongjian omerta-it junen0511 vv19901217 kankan1987 zhijunzhou xandao-dev markus-ebner brad-aot kalniven fredre kule2018 timczm zccmynotebook dearmark mispencer alia2006 micheletto comtk adydeeram silin956 avpjack propelinc hyooeewee soliman-mohamed-thirdwayv sdtm1016 mmoawya burmester-vogel markusgeert 724400475 diaozai gryen7 9haroon aif912752 ghw-15150980624 van-loenen hangaoke1 sarajanerada-cv hieudt-2054 asugai katenorquay shangheyudi

vue-pdf-embed's Issues

PDF not rendering in Safari

Hi! First of all, thank you for building this library!

The PDFs are not rendering in Safari Version 15.3 (17612.4.9.1.8) nor iOS.
I tried my implementation, and your fiddle links too: https://jsfiddle.net/hrynko/ct6p8r7k

First I suspected that it was a bug from PDFjs but then I tried their fiddle link https://jsfiddle.net/pdfjs/wagvs9Lf/ and it renders nice.

In both, my implementation and fiddle using this library the error is the same: Error: Invalid page request getting emitted from rendering-failed event

If you don't have time to work on this, do you have a suggestion to know where to start?
Thank you so much!

EDIT:
I found that when running the Demo directly with webpack (I forked & ran npm run serve) it renders in Safari. But I suspect that's only because it is importing the component directly and not through webpack as it is doing in my Vue CLI project

Incompatibility with Vite and @ionic/vue (isFunction is not a function)

I'm encountering the same problem as this discussion, but I've been able to narrow it down in this reproducible project to an incompatibility between this library, @ionic/vue and vue-router.

Here you can find an explanation of another library having incompatibilities and throwing the same error. As it seems, the problem resides in having multiple versions of Vue, but I don't know why it is the case in this library. Maybe a compilation problem?

If you need anything, just ping me, I'll be happy to help you solve this issue or, at least, find what's exactly wrong.

Self in not defined in Nuxt.js

Props `scale` not working

Props scale not working in latest version 1.1.4, may be it is not published yet?

Import in browser Vue 3 version

Using <script src="https://unpkg.com/vue-pdf-embed"></script> to load the script for vue 3 in browser gives the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'createVNode')

Could you please update the jsfiddle examples to work with Vue 3?

update: checking with various versions, the last one working seems to be 1.0.8

Type 'unknown' does not satisfy the constraint 'ComputedOptions'

Found 1 error in node_modules/_vue-pdf-embed@1.1.2@vue-pdf-embed/types/index.d.ts:29

Index signature for type 'string' is missing in type '{}'

line 29 "unknown"

Inline worker is not supported

Hey,

i get a "Inline worker is not supported" error
In my project I use "Content-Security-Policy" .
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval';" />
Is there someone who had a similar problem and solved it?

package version
"vue-pdf-embed": "1.1.1"
"@vue/cli-service": "^4.5.15"
"vue": "^2.6.14",

How do I get the total number of pages in a PDF

Reference error when attempting to rotate pdf

Encountered error below when attempting to update the value of rotation in vue-pdf-embed

Currently using vuejs version 2.* for the project

Below are the code snippets:

vue-pdf-embed

javascript function to tweak the value

base64 PDF source error

pdf 加载失败 ReferenceError: structuredClone is not defined

Warning: Error during font loading: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

Vue3: Importing vue-pdf-embed makes all jest unit tests fail

Hi,

I'm currently using vue-pdf-embed: ^1.0.5 and my unit tests are all failing. I have this error:

    Inline worker is not supported

       6 |
       7 | <script lang="ts">
    >  8 | import VuePdfEmbed from 'vue-pdf-embed';
         | ^
       9 | import { Vue, Options } from 'vue-class-component';
      10 |
      11 | @Options({

      at e.exports (node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js:1:377673)
      at new <anonymous> (node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js:1:379452)
      at node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js:1:379427
      at node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js:1:1229100
      at node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js:1:1229124
      at node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js:1:170
      at Object.<anonymous> (node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js:1:340)
      at Object.<anonymous> (src/components/PdfViewer.vue:8:1)
      at Object.<anonymous> (src/App.vue:10:1)
      at Object.<anonymous> (tests/unit/example.spec.ts:2:1)

Any idea about what could cause this? I've made a small repro here https://github.com/sbourouis/vue-pdf-embed-bug-repro
When we run yarn test:unit the test fail and we have the error shown above. (See result here)

ReferenceError: self is not defined

ReferenceError: self is not defined
at Object. (D:\site\node_modules\vue-pdf-embed\dist\vue3-pdf-embed.js:1:252)
at Module._compile (node:internal/modules/cjs/loader:1099:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap. (node:internal/modules/esm/translators:170:29)
at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async instantiateModule (file:///D:/site/.nuxt/dist/server/server.mjs:7113:3)

nuxt3 node 17

PDF not rendering in Safari sometimes.

English is not my first language. First of all , this is very nice PDF viewer project.

I've read about the issue #14 , but it seems not exactly the same.

When i tried to use this viewer for a multi-page PDF file , it works find on most of platforms , but iOS.

Android Edge OK
Windows Chrome OK
iOS v14.7.1 Edge/Safari/WeChatBrowser NOT Very Good

I'm using Vue2 version 1.1.2, the usage is :

        <vue-pdf-embed
          :source="src"
          @rendering-failed="log($event)"
        />

I have many files need to show one by one , so it is in a v-for loop , use current++ to go next file (one by one) :

     <div v-for="i in fileNumbers" :key="i">
      <div v-if="i === current">
        <vue-pdf-embed
          :source="src"
          @rendering-failed="log($event)"
        />
      </div>
    </div>

In iOS Safari , It seem working fine at first , but when I go through about 3-5 files (usually 3 files) I got this exception , which is from @rendering-failed :

print from log:

TypeError {}
    column: 167147
    line: 1
    message: "null is not an object (evaluating 'n.canvasContext.canvas')"
    stack: "t\nvalue\n\nasyncFunctionResume@[native code]\nrenderPage@[native code]\n\nasyncFunctionResume@[native code]\n[native code]\npromiseReactionJobWithoutPromise@[native code]\npromiseReactionJob@[native code]"

print from error

Uncaught (in promise) 
    Object {name: "TypeError", message: "undefi...
        message: "undefined is not an object (evaluating 'e[Symbol.iterator]')"
        name: "TypeError"
        stack: "_createForOfIteratorHelper\nvalue\n\npromiseReactionJob@[native code]"

once it happens , go next file can't solve this problem (as I known v-if can create a new component instance)
refresh the page in 10 times can't solve this problem (but more than 10 times, sometime it works!).

Is this about some limitations in Safari when using canvas ?

Unable to import vue-pdf-embed in Nuxt3 project.

Hi, I'm trying to add vue-pdf-embed in my Nuxt3 project (yes, I know it is still beta). But reaching (hopefully) to the first release candidates. Using v1.1.0

Why trying to use VuePdfEmbed component (locally or globally) it fails on the import. Try to look in the source but couldn't find anything weird. Maybe this is a kind of compiler optimalization.

ReferenceError: self is not defined
    at Object.<anonymous> (/home/marcus/git/happy/frontend/node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js:1:252)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:341:24)
    at async __instantiateModule__ (file:///home/marcus/git/happy/frontend/.nuxt/dist/server/server.mjs:5272:3)
[vite dev] Error loading external "/home/marcus/git/happy/frontend/node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js".

For what's worth, this is the part from the dist vue3-pdf-embed.js.

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):"object"==typeof exports?exports["vue-pdf-embed"]=t(require("vue")):e["vue-pdf-embed"]=t(e.vue)}(self,function(__WEBPACK_EXTERNAL_MODULE__103__){return(()=>{var __webpack_modules__={194:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>n});t=r(645),t=r.n(t)()(function(e){return e[1]});t.push([e.id,".textLayer{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;opacity:.2;line-height:1}.textLayer span,.textLayer br{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0%

update pdf-dist version to fix pdf distortion

here is my pdf when i use v1.1.4 vue-pdf-embed,with "pdfjs-dist": "^2.9.359",

and i clone your code and update pdfjs-dist version to "pdfjs-dist": "^2.14.305", my pdf document display correctly!

Current Release missing Rotation Property

The Current Release 1.1.1 is missing the rotation Property in the vue-pdf-embed.vue.

Nuxt3 - throwing "A plugin must either be a function or an object with an "install" function."

I'm using Nuxt3 and the addon is giving error,

A plugin must either be a function or an object with an "install" function.

vue-pdf-embed inpackage.json

"vue-pdf-embed": "^1.1.1"

Nuxt3 plugin, vue-pdf-embed.client.js:

import VuePdfEmbed from "vue-pdf-embed"; export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(VuePdfEmbed) });

Has anyone had any success with Nuxt3?

how to call local assets pdf

Sharing source between instances

Hello,

first, thanks a lot for the component, it's slick.
Like the other fella in #9 I come from a library where pages are displayed one by one. So here I've use a v-for around the component with the :page prop. So far so good. I'm doing that because I need to decorate each page (checkboxes, etc. around every page, not sure I'm doing it the best way possible though).

However, because the loading is done inside the component, I have to have another instance, with v-show="false" just to be able to get the number of pages to feed to the v-for through a ref. Other components load the pdf outside and so we can get the number of pages without ref to the component. But here it needs to be rendered to be ref'd, and so we need to have the number of pages for that, so it needs to be rendered and ref'd, so it's a loop.
Now my question: is the source shared by all component instances? (I see it's loaded with a worker but I'm not sure of the behaviour). Just to be sure I'm not multiplying the pdf in memory.
Cheers!

Method `print` send only current page to print

Hi, @hrynko
If we're in pagination-mode, like <vue-pdf-embed :page="page" and call print method, then it will printed only current page
Is there is way to print whole pdf, even we're looking one page?

how to show the pdf which has chineses font

I make a pdf, use vue-pdf-embed in vue3 project ,it can not show the pdf which has chineses well, chineses font are all lost.

Checkbox no longuer display as checked

When displaying a pdf with checkboxes, checked one no longuer display as checked in version 1.0.6.
It was working fine in version 1.0.5.

Steps to reproduce:
1 - Goto this sample vue-pdf-embed : https://jsfiddle.net/n6oa59bu/

2 - Replace version 1.0.5 to 1.0.6 in the script reference, the checkbox "Reading" is no longuer checked in version 1.0.6.

Viewer "crashes" when page and rotation props are changed at the same time

When the page and rotation props are changed at (more-or-less) the same time, the watchers on those two props cause the render method to be called twice in a row.

The use case that we have is we store page rotation outside of the viewer and when navigating through the pages, we update the page number and rotation according to the page.

Here's a simple test case to reproduce the issue. On load, page 1 is displayed with 0 degrees rotation. When clicking on the button, we switch to page 2 and set rotation to 90 degrees. This triggers the render method twice and that causes an exception. The exception is caught in the render method, but then all the props are emptied right before the "rendering-failed" event is emitted.

<template>
  <div>
    <button @click="changePageAndRotation">Change page and rotation</button>
    <vue-pdf-embed :source="pdfSource" :page="page" :rotation="rotation" />
  </div>
</template>

<script>
import VuePdfEmbed from '../src/vue-pdf-embed.vue'

export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      pdfSource: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
      page: 1,
      rotation: 0
    }
  },
  methods: {
    changePageAndRotation() {
      if (this.page === 1) {
        this.page = 2
        this.rotation = 90
      } else {
        this.page = 1
        this.rotation = 0
      }
    }
  }
}
</script>

I have a working fix (I'll send in a pull request in a few minutes), but I'm not sure if that's the best solution. Somebody else might have a better idea.

Vue-pdf parity?

Hi,

First off, I'm really glad to see a new Vue component for PDF rendering :-)

I'd like to migrate to this from vue-pdf, but vue-pdf-embed is missing a couple of features I rely on. For my application, I render each PDF page separately (i.e., I iterate through the pages and would have a separate for each. For this to work, I need an event which gives me the total pages in the PDF. The vue-pdf package provides @num-pages for this. Is there a way to get this info from vue-pdf-embed?

Secondly, to navigate to the correct page, I use vue-pdf's @link-clicked event to get the page number. Is this possible with vue-pdf-embed?

Thanks!

Feature request: Print method

vue-pdf has a public method to bring up browser's print dialog for the PDF: https://github.com/FranckFreiburger/vue-pdf#public-methods

It can be invoked simply:

methods: {
    print () {
      this.$refs.myPdfComponent.print()
    },
}

My team's project needs this feature to move away from vue-pdf which lacks support for both (1) Vue3 and (2) ES Modules / Vite.

What do you think @hrynko ? Would you review/accept a PR to implement this?

Feature request: Download method

Is there a possibility to create a public method (like the print() method) for direct downloading the rendered pdf.

methods: {
    download () {
      this.$refs.myPdfComponent.download()
    },
}

I make use of a source like data:application/pdf;base64,<BASE64_ENCODED_PDF> to render the pdf.

suggestion - add file name parameter () to print() function

Hi @hrynko ,

I've come across your work vue-pdf-embed and I have a question about the built-in print() function from the library. I use your package to enable file preview of pdf on my work. While I attempt to save the pdf file from the Chrome browser prompt-in print window (I choose 'Save As Pdf' instead of 'Print' as my option), I found that the name of the file about to be saved is different from the original file name. The file name appears to be the name of the website I'm working on.

Image 1: the original file name as shown

Image 2: Attempting to save the preview pdf

Image 3: Prompt window showing a different file name that is not the same as the original one.

Is there a workaround to include a 'file_name' parameter besides than number to indicate the dpi for the printing, or we can default set the file name to be same as the original file when we are using the print() function?

How to use it for Vue 2?

Dynamic resize

Thanks for providing this component. I'm coming from vue-pdf and one feature I miss is dynamic resizing. Would it be possible to implement this?

The workaround I've been using for now is to include vue-resize-sensor as a sibling component, and then using the width of the that component to reset the width property of the vue-pdf component, which does cause it to re-render. But it would be nice if this feature were built-in.

Thanks!

Build Error: Type 'VuePdfEmbedMethods' does not satisfy the constraint 'MethodOptions'.

When I try to build my project I get the following error message:

Type 'VuePdfEmbedMethods' does not satisfy the constraint 'MethodOptions'.
  Index signature for type 'string' is missing in type 'VuePdfEmbedMethods'.

Using the latest release version.

[Feature] Advanced Highlighting

Hi,

I want to do extensive highlighting on the text of my PDF and not all the features are supported by pdfjs-dist.

I would like to add as an option the possibility to have a search with :

diacritics insensitive (unsupported), case insensitive (supported), entireWord search (supported)
several words to search, e.g. "alex" and "alice (unsupported)

The first solution I propose would be to add PdfFindController to access it via the $ref please? Then I just have to fork the library to add the desired functionality.

The other proposal would be to possibly expose an event (like beforeRender) that would allow us to easily alter the text of the rendered PDF? But I am not sure that this second option is possible.

Can you help me with this feature because i really need it and your package seems to be the "best" available right now please?

Digital signatures are not rendered

First of all I would like to thank you for the work done with this component which makes life much easier for displaying pdfs with Vue.

Unfortunately in my use (Vue 2 version) I noticed that it does not display the rendering of digital signatures.

Unless I'm mistaken pdfjs allows it, pdfjs-vue this component for example does, do you think it would be possible to add this?

Thanks in advance ;)

I want to add a loaded animation when using link loading

How to render the waterMark?

thanks for your plugin.
i have a question,
my PDF has some waterMark,but can't be rendered.
What should I do?

I want to add a loaded animation when using link loading

Expose a function to cancel rendering job in worker

Hello, first of all thank you for your amazing package.

My feature request is because, I use a modal with your pdf viewer, and some times if we are too quickly the worker doesn't stop is previous rendering job.
So if we close while its still rendering and re-open immediately after. The package will throw an error and then we need to close and re-open again to make it work.

So maybe it would be nice to have some type of function to call with this.$refs, to cancel the current job rendering manually.

The component is not responsive

Hello,
First of all, many thanks for the great component.
I only have one problem with that. The component is not responsive.
is it planned to fix this?
i use nuxtjs and not vuejs
Thanks

Error just instaling in nuxt2 project

ERROR Failed to compile with 1 errors friendly-errors 17:19:28
ERROR in ./node_modules/vue-pdf-embed/dist/vue2-pdf-embed.js friendly-errors 17:19:28

Module parse failed: Unexpected token (1:529323) friendly-errors 17:19:28
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Getting CORS errors

Hi, I upload my pdf to my s3 bucket and when trying to assess the url, i get cors errors

examples do not work in firefox

While the examples work under chromium/webkit, they do not work under firefox.
This partially translates to them not working in real conditions.
Under firefox the pdf does seem to load extremely slowly, but i have not witnessed it triggering rendered, prohibiting any sort of loading implementation

Can't reduce canvas resolution to avoid iOS limit

iOS Error:
Canvas area exceeds the maximum limit (width * height > 16777216).

IE 11 issue

I am trying to use this to view pdfs in an IE 11 environment, however, I am receiving a SCRIPT 1002 error. When I follow the link to the chunk venders, this is the code that seems to be causing the issue.

I believe the issue to be the lambda function not transpiling to ES5, but have no clue why.

Here are the relevant files:

babelrc
{ "presets": [ [ "@babel/preset-env" ] ], "plugins": [ "@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-arrow-functions", "@babel/transform-runtime" ] }

babel.config.js
module.exports = { presets: [ ['@vue/cli-plugin-babel/preset', { polyfills: [ 'es.map', 'es.promise', 'es.object.assign', ], useBuiltIns: "entry", corejs: 3, ignore: /node_modules\/(?!debug)/ } ]], plugins: [ "@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-arrow-functions", "@babel/transform-runtime" ], }

browserslistrc
> 1% last 2 versions ie 10

vue.config.js
module.exports = { "productionSourceMap": true, "transpileDependencies": [ "vuetify", "debug", "vue-pdf-embed" ], configureWebpack: { devtool: 'nosources-source-map' }, }

webpack.config.js
const webpack = require('webpack'); module.exports = { output: { clean: true, filename: 'edocss-wp.js', }, plugins:[ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] };

How to clean the PDF?

There's a way to clean the PDF?, for example, I select a PDF and is shown in the component, everything is fine, but when I try to delete the selected pdf, is not cleaned from the component; there's a solution for that?

Ability to set custom <canvas> width and height for better quality

Hi,
Great component by the way!
Are you able to implement props that will allow custom width/height for the canvas?

We are losing some quality appearance with just the client viewport dimensions being passed.

Thank you.

Loaded event not exist

Hello, @hrynko ! Thanks for making an awsome package 🙏

When I am using your vue-pdf-embed,
I found that loaded event is missing.

Could you please fix it ? thx thx

is the original document size data available?

Hi.. I need to work with the document's original dimensions.. (A4, A3, ...) is this available in px on vue-pdf-embed? I can't find any reference to this.
thank you!

rendering issue

Hi @hrynko .. I'm having some issues rendering a pdf with source in base64 format. When I inspect the vue-pdf-embed element it says height: 0 even if I define the height prop... using width="1000". Also it's only rendering one page, this sample pdf has 2 pages.

I thought it could be the parent modal, but then I tried setting a div inside with height: 1000px and it looks ok.

I've been using vue-pdf-embed without any issues so I thought I was doing something wrong and maybe I am, I just cant figure out what it is! If you have any ideas would appreciate the help... thanks!

I'm using "vue": "2.6.12" and "vue-pdf-embed": "^1.1.4" I just installed today.

Safari iOS memory error

Running into an error when displaying multiple pages on a 4MB PDF.

Total canvas memory use exceeds the maximum limit (256 MB)" error in safari 12 and above

I've seen errors like this elsewhere that seem to be addressed: mozilla/pdf.js#11297

I forked this repo and updated the pdf-dist package and that didn't seem to help. Maybe my implementation is incorrect? Anybody run into this?