Multiple page pdfs initiate multiple requests

[shinchanZ]

Hello, I have a question, why does my 20-page pdf initiate 20 requests, which will cause the loading to be very slow. Thanks.

[randolphtellis]

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.

[githubzhuangye]

你的组件应该向上抽一层，用拿到的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);  
            }  
        });  
    });  
};

[rpdg]

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>

[linfanxxxx]

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！