Errors when reloading PDF

[Pavel1Uvarov]

On my page, there is a PDF combiner, the essence of which is to combine several PDFs into one. Every time I change the order and send a back request, after receiving a response and reloading the PDF, I get two errors

"@tato30/vue-pdf": "^1.3.4",
"vue": "^3.2.47",
"vite": "^4.5.0"

Template:

 <div v-show="!ui.preloading && documents.length" class="divide-y-4">
      <VuePDF :pdf="pdf.src" v-for="(page, index) in pdf.pages" :fit-parent="true" :page="page" :key="index"> 
      </VuePDF>
</div>

<Container orientation="vertical" @drop="onDrop" class="mt-4 divide-y divide-gray-100 rounded-md border border-gray-200" v-show="documents.length > 0">
<Draggable v-for="(item, i) in documents" :key="item.id" >
  <div class="flex items-center justify-between py-2 pl-4 pr-5 text-sm leading-6">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 flex-shrink-0 text-gray-400">
      <g>
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM6 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM6 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
      </g>
      <g transform="translate(6)">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM6 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM6 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
      </g>
    </svg>
    <div class="ml-4 flex min-w-0 flex-1 gap-2">
      <span class="truncate font-medium">{{ item.name }}</span>
      <span class="flex-shrink-0 text-gray-400">{{ bytesToMegaBytes(item.size) }} mb</span>
    </div>
    <div class="ml-4 flex-shrink-0">
      <button @click="removeDoc(item)"
              class="flex items-center justify-center p-1 text-gray-600 transition-colors duration-300 bg-white rounded-full hover:bg-gray-100">
        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
  </div>
</Draggable>
</Container>

Script:

const onDrop = async (dropResult) => {
  documents.value = applyDrag(documents.value, dropResult);
  await loadPdf()
}

const loadPdf = async () => {
  if (documents.value.length > 0) {
    ui.preloading = true
    const fd = new FormData();

    documents.value.forEach((el, idx) => {
      fd.append(`pdfs[${idx}]`, el, el.name);
    })

    await axios.post('api/pdf-combiner', fd, {
      "Content-Type": "multipart/form-data",
      responseType: 'arraybuffer'
    }).then((res) => {
      let pdfData = usePDF(res.data)

      pdf.value.src = pdfData.pdf
      pdf.value.pages = pdfData.pages
      pdf.value.info = pdfData.info
    }).catch((e) => {
      pushNotification('error', 'Something went wrong.')
    })
    ui.preloading = false
  }
}

[TaTo30]

That is a very early version, consider to update to latest version.

[Pavel1Uvarov]

@TaTo30 Thanks for the quick response. I've updated the version to 1.9.3 and it didn't help me. Do you have any suggestions?

[TaTo30]

Are the errors the same?

Try to use a ref in usePDF for reloading PDFs:

const pdfSources = [
  '/example_014.pdf',
  '/example_036.pdf',
  '/example_041.pdf',
  '/example_045.pdf',
  'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
]
// Setting the first (or default) PDF
const pdfSource = ref(pdfSources[0])
const pdfSourceIdx = ref(0)

const { pdf } = usePDF(pdfSource)

function nextPdf() {
  pdfSourceIdx.value += 1
  if (pdfSourceIdx.value >= pdfSources.length)
    pdfSourceIdx.value = 0
  pdfSource.value = pdfSources[pdfSourceIdx.value]
}

You can get the full example here: https://tato30.github.io/vue-pdf/examples/advanced/multiple_pdf.html

[Pavel1Uvarov]

@TaTo30 Yes, the error is the same. "Try to use a ref in usePDF for reloading PDFs:" What do you mean? Can you explain, please?

I get one file from the back end. So I sent a request to my back-end with a couple of PDF files and got a response with PDF which was combined. And I have drag-and-drop and after I change the file order I sent a new request to get a new one combined PDF file and after that I got this 2 errors

[Pavel1Uvarov]

@TaTo30 Also after updating the version I got a new error

:fit-parent="false" - if set false the error isn't showing

[TaTo30]

usePDF is reactive, if you provide a ref value on src param the component will update the PDF automatically when the src changes, look the example that i shared above.

[Pavel1Uvarov]

@TaTo30 I see. What if before uploading PDF my ref is empty?

[Pavel1Uvarov]

@TaTo30 Fixed by using not empty string in ref. But is there any way to pass emptiness so that there is no immediate request to try to receive a PDF file?

[TaTo30]

You could use undefined instead empty string but you will probably get a type warning.