Comments (4)
my code:
function getDocumentData(pdfPath: string): Promise<Uint8Array> {
return new Promise<Uint8Array>(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open('GET', pdfPath);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
resolve(new Uint8Array(xhr.response));
};
xhr.onerror = function () {
reject(new Error('PDF is not loaded'));
};
xhr.send();
});
}
let state = reactive({
pdfDoc: null,
pdfPages: 0,
});
onMounted(async () => {
let docData = await getDocumentData(props.url);
const pdf = await createLoadingTask(docData).promise;
state.pdfDoc = docData;
state.pdfPages = pdf.numPages;
});
<template>
<VuePdf v-for="page in state.pdfPages" :key="page" :src="state.pdfDoc" :page="page+1" />
</template>
from vue3-pdfjs.
Hello, I have a question, why does my 20-page pdf initiate 20 requests, which will cause the loading to be very slow.
Thanks.
Hi @shinchanZ , I think I'll have to make some changes on how the component functions.
At the moment, it reads the pdf of the src
prop which causes it to make a request per page. Changing this to work with the pdf returned from createLoadingTask
should solve your issue.
I can't give you an exact time frame on a fix as I'm moving house but expect one in the next month or so.
from vue3-pdfjs.
你的组件应该向上抽一层,用拿到的loadingTask.promise.then((pdf)
拿到的pdf.numPages
作为pdf.getPage(num)
的总页数,大致代码类似。当然了,我是用svg实现的,只是做简单的预览。
// 渲染pdf
const renderPage = (pdf, num = 1) => {
pdf.getPage(num).then((page) => {
const viewport = page.getViewport({ scale: PAGE_SCALE });
page.getTextContent().then((textContent) => {
// building SVG and adding that to the DOM
const svg = buildSVG(viewport, textContent);
document.getElementById("pageContainer").appendChild(svg);
// 递归
if(num < pdfData.pages) {
renderPage(pdf, num + 1);
}
});
});
};
from vue3-pdfjs.
my code:
function getDocumentData(pdfPath: string): Promise<Uint8Array> { return new Promise<Uint8Array>(function (resolve, reject) { let xhr = new XMLHttpRequest(); xhr.open('GET', pdfPath); xhr.responseType = 'arraybuffer'; xhr.onload = function () { resolve(new Uint8Array(xhr.response)); }; xhr.onerror = function () { reject(new Error('PDF is not loaded')); }; xhr.send(); }); } let state = reactive({ pdfDoc: null, pdfPages: 0, }); onMounted(async () => { let docData = await getDocumentData(props.url); const pdf = await createLoadingTask(docData).promise; state.pdfDoc = docData; state.pdfPages = pdf.numPages; });<template> <VuePdf v-for="page in state.pdfPages" :key="page" :src="state.pdfDoc" :page="page+1" /> </template>
It works,Thanks you very much!
from vue3-pdfjs.
Related Issues (12)
- Error when running with vite HOT 3
- This plugin support typescript HOT 1
- First rendering problem on mobile side HOT 2
- vue3-pdfjs/esm缺少svg导致报错 HOT 1
- 还在维护吗?发票pdf缺少文字 HOT 3
- memory leak HOT 1
- withCredentials support HOT 2
- run serve problem about 'canvas' HOT 1
- Question regarding loading pages dynamically HOT 2
- Wrong scale on print mode
- Missing declarations to index-19f89c12.js and SyntaxError: Cannot use import statement outside a module HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue3-pdfjs.