tato30 / vue-pdf Goto Github PK

Hello,

I encountered an issue with rotation while using VuePDF in my implementation. Here are the details:

My implementation involves document scanning, followed by viewing the scanned PDF using VuePDF.
I provide the user with the ability to cycle through the pages and rotate the PDF using VuePDF props.
To persist the rotation changes, I store the rotation state per page per PDF and commit the changes on save.
I use the QPDF "--rotate" command to apply the rotations and save them to the PDF file.
However, upon reloading the PDF, the newly rotated pages (saved into the file) do not retain their rotation in VuePDF.

I would like to know how I can check the actual rotation of the PDF.

Thank you,
Jose

不知道是不是pdf.js的问题

For some reason, no matter what I do, the value of pdf remains undefined. I checked the network tab and there's no request being sent to fetch the pdf either. Checking the console doesn't help, since the console doesn't show any errors. Even using the exact same code from the example doesn't work. What could be the cause of this weird behavior?

I'm using vue 3.3.4 and vite ^4.1.4 and VuePDF 1.7.2.

I have a rest API which fetches the PDF through a url with JWT authentication. How can the PDF be loaded with your component (Will appreciate an example) ?

Currently I call my rest API like:

            axios.get(API_URL + 'getpdf', {
                params,
                headers: { Authorization: `Bearer ${user.accessToken}` },
            }).then((response) => {
                return response;
            });

I was looking forward to trying this library and I got the following error and I have no idea why.

Module parse failed: Unexpected token (315:41)
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
| const clearLayers = () => {
| // Clear all childnodes of layer elements

  TextlayerREF.value.replaceChildren?.();

| AnnotationlayerRef.value.replaceChildren?.();
| // Clear event listeners of annotation layer

Uncaught (in promise) TypeError: Cannot destructure property 'style' of 'div' as it is null.
    at setLayerDimensions (util.js:17:1)
    at AnnotationLayer.render (util.js:17:1)
    at h (index.mjs:234:1)

I didn't even use the annotation-layer. I setit to false, yet this keeps happening.

her is my code:

  <VuePDF v-for="(page) in totalPages"
              :key="page"
              :scale="1.3"
              :page="page"
              :annotation-layer="false"
              class="bg-orange-300 mb-[10px] w-full"
              :url="url"
              :pdf="pdfContent"
              @loaded="onLoaded" />

and I think it's happening in some kind of loop, then causing memory leak, because this what I see after opening the pdf for couple of times:

const url:any = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';官方範例url有效
const url:any = 'https://www.yamaha-motor.com.tw/images/motor/CYGNUS_GRYPHUS/B8R-F8199-T1.pdf';非官方url無效
const { pdf }:any = usePDF({ url });
用dir打印出的pdf.value是undefined

Hey TaTo30! Great work!
Is it possible to load a Blob or an objectURL ( by createObjectURL ) ?

TIA,
mxaxs

I've looked in to combine the pinch zoom on PDF.js (example on: https://gist.github.com/jsprpalm/12217feab2f1acc14bd8e8508291619e) with the VuePDF library but the quality is low since the PDF needs to scale according to the scale function on VuePDF, combining this rerenders the PDF and gives a flicker effect.

(How) is it possible to enable pinch zoom from PDF.js in this library?

Getting error Cannot set properties of undefined (setting 'workerSrc') when trying to build my static website with Astro+Vue.

Hello,

Does it posible to add features such : fullscreen, adjust to height , adjust to width, and browse pages thumbnails?

Regards

I have the following code:

<script setup lang="ts">
import { ref } from 'vue';
// @ts-ignore
// no type definitions found
import { VuePDF, usePDF } from '@tato30/vue-pdf';

const pdf = ref();

const getPdf = () => {
  const pdfInfo = usePDF('valid-path-to-a-pdf-file');

  if (pdfInfo.pdf) {
    pdf.value = pdf;
    console.log(pdfInfo);
  }

};
</script>
<template>
  <button @click="getPdf">Get PDF</button>
  <VuePDF :pdf="pdf" v-if="pdf" />
</template>

I get the following error when I click the button:

index.mjs:499 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'then')
    at O (index.mjs:499:17)
    at index.mjs:508:27
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2685:29)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:356:32)
    at flushJobs (runtime-core.esm-bundler.js:401:9)

I know the file exists and can be opened fine in Chrome and Acrobat. It is 91.4 MB in size. I also get information in the pdfInfo object. (e.g. I can see the number of pages, the meta data, etc...)

Warning: loadFont - translateFont failed: "UnknownErrorException: CMapReaderFactory not initialized, see the useWorkerFetch parameter.".
util.js:380 Warning: Error during font loading: CMapReaderFactory not initialized, see the useWorkerFetch parameter.

my full code

Cual es el codigo que debo usar para implementarlo en mi web de wordpress ya que no estoy usando npm

any plans to have a nuxt support?

Is it possible to change the pdf source after init?
Here: const { pdf } = usePDF('sample.pdf') the file is fixed.
I want to show different pdf-files in a modal. Therefore i need to change the src and rerender the viewer.

Is it possible?

how to custom watermark text. like set font size and count watermark ?

<VuePDF
:pdf="pdf"
:watermark-text="Preview"

import { VuePDF, usePDF } from "@tato30/vue-pdf";

I want to set the width size of the PDF to 100%

Hi,

How can I load pdf from url query parameter?
Something like:

/view-pdf?filename=sample.pdf

I'm making a Laravel Nova module to display pdf using your module
Thank you for the help

Hello I have been playing VuePDF for over a week, it is one of the best PDF tools in Vue3 ecosystem.
I think it will be really useful if there is a way to interrupt the PDF loading process. For large PDF file,
if the user don't want to wait or click the wrong file and want to change another one immediately,
the interrupt mechanism will kill currrent PDF loading gracefully before it start to load a new one.

If I switch another view while the pdf is loading, the following error will popout:

@tato30_vue-pdf.js?v=9686917e:32013 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode') at @tato30_vue-pdf.js?v=9686917e:32013:31.

Hello, great component ! I gave you a star 👍

All look great but when changing pages of the pdf with a button like in you example I get the following warning in the browser console:
Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

Did not found anything related in the docs, is this a bad configuration on my side ? Or maybe some optimisation needed ?

Hi all.

I wonder if it's posible add a signature (draw with finger) as anotation into PDF.

I try to enable annotation-layer but i cant see any change

How can I access the canvas generated by the VuePDF component, I'm looking to apply an SVG filter to the canvas component itself.

Hello,

if I have the PDF url in a prop, which can change. How do I ensure the pdf is reloaded when the url changes?

Is it best to do a watch on the prop or is there a more module-supported way?

I have a buffer loaded from server, can I open it with this code ? If yes, how to please ?

Thanks for this project, it work fine.

Have a good day!
When displaying images, sometimes they are not quite readable. poor quality . how can i render for better quality, maybe there are options or methods?
Thanks for the help!

Firstly, thank you very much for creating VuePDF!

I have a question relating to annotations (highlights) which came to me after reviewing the react-pdf-highlighter repo
. Within their react library they are able to display highlights pulling from a json file, which I image you could also pull from a database of saved annotations.

My question is how would you image/advise someone to replicate this within in your component. Below I have provided an example of one of the highlights from the json file.

Thank You

{
      content: {
        text: " Type Checking for JavaScript",
      },
      position: {
        boundingRect: {
          x1: 255.73419189453125,
          y1: 139.140625,
          x2: 574.372314453125,
          y2: 165.140625,
          width: 809.9999999999999,
          height: 1200,
        },
        rects: [
          {
            x1: 255.73419189453125,
            y1: 139.140625,
            x2: 574.372314453125,
            y2: 165.140625,
            width: 809.9999999999999,
            height: 1200,
          },
        ],
        pageNumber: 1,
      },
      comment: {
        text: "Flow or TypeScript?",
        emoji: "🔥",
      },
      id: "8245652131754351",
    },

Hello,

when building my thing using Vite I see a quite large chunk size for VuePDF. I've already isolated it into a separate chunk to see more clearly what's going on, but apart from that, I'm quite clueless as to why it's at almost 3 MB.

Do you have any ideas? Is that normal? Even with pdf.js as a dependency, it shouldn't be that big, I guess.

Best regards

Hello,

I am running version 1.7.2 and am experiencing an issue with text-layer, the text is rendering below the pdf preview.

Text layer on:

Text layer off:

If thats the expected behavior, then so be it but i recall in 1.5.1 it behaving differently. Thank you anyhow for taking a look into this for me.

Regards,
Jose

Hello everyone,

Is there a way to display all the pages sequentially one below the other?

Thanks

Hi, I'm working with Vue3.
The pdf data comes from the server and before passing it to your component I convert it as a UInt8Array but I have this warning that it doesn't allow me to view it. Any suggestions?

Warning: Setting up fake worker.
util.js:425 Warning: Indexing all PDF objects
util.js:425 Warning: Invalid stream: "FormatError: Bad FCHECK in flate stream: 120, 239"
util.js:425 Warning: Invalid stream: "FormatError: Bad FCHECK in flate stream: 120, 239"
util.js:425 Warning: Invalid stream: "FormatError: Bad FCHECK in flate stream: 120, 239"

I also post the instruction for data encoding:

var buf = Buffer.from(prop.data, 'utf-8')
const { pdf } = usePDF({ data: buf }

Thanks in advance

How can I pass a ref to the `usePDF´ to properly ensure reactivity so that if the ref's value changes the PDF will change.

My current implementation is linked below:
https://github.com/librecharts/webpage/blob/master/src/components/PDFViewer.vue

This has a few shortcomings:

• It re-assigns refs which shouldn't be done
• Rotation does not work
• Desctruction does not work (the canvas remains)

Are refs and reactivity a planned thing for this library?

Kind regards
Mauro M.

As of now, there is no .d.ts files, so typescript project can't detect the module @tato30/vue-pdf

If there is typings for this library, could you kindly link me it?

Sorry for being a newbie pdfjs-wise, but is it a different component or way to use it, when I have one viewer, which handles paging in itself? I presume it is needed to take advantage of loading only the required pages from large docs with HTTP range requests, which are supported by pdfjs. Something like the example from the pdfjs site, which also seems to use a worker process to load/render pages. Your docs seem to require a separate copy of your component for each page. Am I missing something? Otherwise excellent work, the first pdfjs component for Vue that works out of the box. Thanks a lot!

Is it possible to get intent: "print" supported as a prop that can be passed through to the renderContext when rendering the canvas?

I'm looking to support printing PDFs with this component without the user necessarily needing to download the document first before being able to print it.

Thanks in advance!

Hello, Sorry for silly questions but i can't understand how can I add a text annotations after some text was selected. Is it possible at all?
I thought annotation-layer is responsible for this. But seems not. Or I did something incorrect.

my code

<script setup lang="ts">
import type { DocumentInitParameters } from 'pdfjs-dist/types/src/display/api';
import { ref, watch } from 'vue';

import { VuePDF, usePDF } from '../../src';
import pdfF4 from '../pdf/_pdf4.pdf';
import pdfxfa from '../pdf/_xfa.pdf';
import pdf014 from '../pdf/example_014.pdf';
import pdf036 from '../pdf/example_036.pdf';
import pdf041 from '../pdf/example_041.pdf';
import pdf045 from '../pdf/example_045.pdf';

const currentPdfIndex = ref(0);

const pdfF4Type: DocumentInitParameters = {
  url: pdfF4,
  enableXfa: true,
}
const pdfxfaType: DocumentInitParameters = {
  url: pdfxfa,
  enableXfa: true,
}
const pdf014Type: DocumentInitParameters = {
  url: pdf014,
  enableXfa: true,
}
const pdf036Type: DocumentInitParameters = {
  url: pdf036,
  enableXfa: true,
}
const pdf041Type: DocumentInitParameters = {
  url: pdf041,
  enableXfa: true,
}
const pdf045Type: DocumentInitParameters = {
  url: pdf045,
  enableXfa: true,
}

const pdfSources = [
  pdfF4Type,
  pdfxfaType,
  pdf014Type,
  pdf036Type,
  pdf041Type,
  pdf045Type,
  'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
]

const { pdf } = usePDF(pdfSources[currentPdfIndex.value], {

})
const scale = ref(1)
const rotation = ref(0)

function getAnnotations() {
  pdf.value?.promise.then((doc) => {
    console.log(doc.annotationStorage)
    console.log(doc.annotationStorage.print.getAll())
    console.log(doc.annotationStorage.getAll())
  })
}

function nextPdf() {
  let sourceIndex = currentPdfIndex.value + 1
  if (sourceIndex >= pdfSources.length)
    sourceIndex = 0

  const { pdf: newPDFToLoad } = usePDF(pdfSources[sourceIndex]) // Loads the new pdf
  watch(newPDFToLoad, () => {
    // How usePDF returns a promised values, we must wait (watch) for a resolved value before reassign the main pdf ref
    pdf.value = newPDFToLoad.value
    currentPdfIndex.value = sourceIndex
  })
}

function onAnnotation(data) {
  console.log(data)
}
</script>

<template>
  <div>
    <button @click="scale = scale - 0.25">
      - Scale
    </button>
    <button @click="scale = scale + 0.25">
      + Scale
    </button>
    <button @click="rotation = rotation - 90">
      - Rotation
    </button>
    <button @click="rotation = rotation + 90">
      + Rotation
    </button>
    <button @click="getAnnotations">
      get annotations
    </button>
    <button @click="nextPdf">
      Next PDF
 <div style="text-align: center;">
      <VuePDF
        :pdf="pdf"
        :scale="scale"
        :rotation="rotation"
        annotation-layer
        text-layer
        fit-parent
        image-resources-path="https://unpkg.com/[email protected]/web/images/"
        @annotation="onAnnotation"
      />
    </div>
  </div>

I have a reactive page

let page = ref(1)

<VuePDF :page="page" :pdf="pdf" />

If I change it in mounted on a new page event ,the viewer on the screen stays on the same page.Any thoughts? Thanks for your work.

Hi
I'm using vuePDF to load dynamically 5 pdfs of many pages from an amazon s3 server and it works fine at first but it makes the browser tab completely crash at some point (Chrome).
My app is a nuxt 3 vue 3 app.

This bug didn't happen yet on Firefox tho

Do you have any incoming fix/info about that ? Thanks

Hi,

seems like mozilla released a new version of pdfjs three days ago and now the package is not working

https://github.com/mozilla/pdf.js/releases

Could this be fixed?

Also came to my mind this situation, each time mozilla makes a new release, this library will be broken until updated? Because browsers make auto updates and the idea scares me. Point me on the right direction if im wrong about this.

Thank you

The usePDF function only works on page load and when I try to use usePDF function later it gives this error :

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'then')
at initDoc (index.js:333:21)
at index.js:346:9
at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21)
at job (runtime-core.esm-bundler.js:1812:17)
at flushPreFlushCbs (runtime-core.esm-bundler.js:336:13)
at updateComponentPreRender (runtime-core.esm-bundler.js:5789:9)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5702:21)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
at instance.update (runtime-core.esm-bundler.js:5763:56)

Any idea ?

Hello Sir,
it may be just me, but I guess it should be stated somewhere quite prominently that since commit a2c662e from July 10, 2023,

import 'pdfjs-dist/web/pdf_viewer.css';

is necessary if any of text-layer or annotation-layer are used; otherwise, the canvas and the layers won't overlay at all. Or would it be

import '@tato30/vue-pdf/style.css'

? But I can't find that one anywhere except in the updated examples in /docs.

Best regards

On low-end devices, trying to render a ~60 page pdf with lots of annotations provides a very useless experience.

When I looked at the official repo for pdfjs web, I saw that they use lazy loading to render only a certain range of pages and use a loader placeholder for the rest.

If we can implement this, it will be great and it will increase the usability on low-end devices.

• Lazy Loading

For the project I am working on, I need to be able to modify the annotations during loading and then, get the edited version (completely) after the user has edited it.

Is there a way to search the whole PDF for text with this package? Maybe even highlight it as well?

@TaTo30 amazing work, just an idea. It would great to check this one load.

"Uncaught (in promise) Error: Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.
"

PDFJS.getDocument({ url: pdf_url }).promise
.then((pdf_doc) => {

    if (this.pdf_doc) {
        this.pdf_doc.destroy();
    }
    this.pdf_doc = pdf_doc;
    this.total_pages = this.pdf_doc.numPages;
})

Hi all,

I have an issue where after building my app using vite, vue-pdf seems to be included as an import on every one of the entry points into my webapp.

The component that includes vue-pdf dynamically imported on two pages only and those pages themselves are also dynamically imported, so. Using rollup manual chunking I separated the @tato package into it's own chunk but this chunk is still imported in every route on my app.

Manually inspecting the build code I can see that the @tato chunk is imported on every single route in vue router.

I created a new dummy app to make sure I had made no daft mistakes and was still getting this behaviour.

Any advice?

Ignore me. I have just learned a valuable lesson about how webchunking works.

The component that contained Vue-PDF was being imported into an index file with a bunch of other components to form a library. Because other components in that library are used across the site it was including all the PDF-js stuff as well. Still got a lot to learn...