如何在nuxt项目中下载pdf？

Question

 <div  style="height: 0;position:  fixed;  left: 50%; top: 0; transform: translateX(-50%);
       z-index: -1;overflow: hidden">
          <ticket-pdf v-if="pdfData" :pdfData="pdfData" :downloadBtn="downloadBtn"  @download="downloadBtn = $event"  />   </div>

In my nuxt project, i need to download pdf file in my main componet.When user clicked download button it will be downloaded directlty without previewing pdf component. So i hide my ticket-pdf component inside my main component. This way works in localhost but when i published my project to test area it does not work. It download only 1 empty page. and i face with this mistake.

Failed to load resource: the server responded with a status of 500 ()

If i open my pdf file in a other page and i can preview and download it also. But i need to doownload it without routing anywhere and directly in my main component

  printPDF() {
            const html2canvasOptions = {
                allowTaint: true,
                removeContainer: true,
                imageTimeout: 15000,
                logging: true,
                useCORS: true,
                scrollX: 0,
                scrollY: 0,
                scale: 2,
            };
            // Initialize the PDF.
            let pdf = new jsPDF('p', 'in', [8.5, 11], false);
            let totalPage = 0
//i have many pages and countof pages changes . It depends. so firstly i calculate page count and create pdf.
            let pageCount = document.querySelectorAll('[id^=contentPrint]').length
             for (let i = 0; i < pageCount; i++) {

                const contentPrint = document.getElementById('contentPrint-' + i);
                html2canvas(contentPrint, html2canvasOptions)
                    .then((canvas) => {

                        const image = {type: 'jpeg', quality: 1};
                        const margin = [0.5, 0.5];

                        let imgWidth = 8.5;
                        let pageHeight = 11;

                        let innerPageWidth = imgWidth - margin[0] * 2;
                        let innerPageHeight = pageHeight - margin[1] * 2;

                        // Calculate the number of pages.
                        let pxFullHeight = canvas.height;
                        let pxPageHeight = Math.floor(canvas.width * (pageHeight / imgWidth));
                        let nPages = Math.ceil(pxFullHeight / pxPageHeight);
                        totalPage += nPages

                        // Define pageHeight separately so it can be trimmed on the final page.
                        pageHeight = innerPageHeight;

                        // Create a one-page canvas to split up the full image.
                        let pageCanvas = document.createElement('canvas');
                        let pageCtx = pageCanvas.getContext('2d');
                        pageCanvas.width = canvas.width;
                        pageCanvas.height = pxPageHeight;


                        for (let page = 0; page <= nPages; page++) {
                            // Trim the final page to reduce file size.
                            if (page === nPages - 1 && pxFullHeight % pxPageHeight !== 0) {
                                pageCanvas.height = pxFullHeight % pxPageHeight;
                                pageHeight = (pageCanvas.height * innerPageWidth) / pageCanvas.width;
                            }

                            // Display the page.
                            let w = pageCanvas.width;
                            let h = pageCanvas.height;
                            pageCtx.fillStyle = 'white';
                            pageCtx.fillRect(0, 0, w, h);
                            pageCtx.drawImage(canvas, 0, page * pxPageHeight, w, h, 0, 0, w, h);

                            // Add the page to the PDF.
                            if (page > 0) pdf.addPage();

                            let imgData = pageCanvas.toDataURL('image/' + image.type, image.quality);
                            pdf.addImage(imgData, image.type, margin[1], margin[0], innerPageWidth, pageHeight);

                        }

                    });
            }

            setTimeout(() => {
               // pdf.deletePage(totalPage + 1)
                pdf.save("e-ticket" + '.pdf')

            }, 3000)

            setTimeout(() => {
                this.$emit("download", this.download);
            }, 4000)
        },

This is how i create pdf area. When user clicked download button i create pdf and download it thanks to my props.

Answer 1

    printPDF() {
            window.scrollTo(0, 0);
            // Initialize the PDF.
            let pdf = new jsPDF('p', 'in', [8.5, 11], false);
            let totalPage = 0
            let counter = 0
            let myArray = []
            let pageCount = document.querySelectorAll('[id^=contentPrint]').length

            for (let i = 0; i < pageCount; i++) {
                myArray.push('contentPrint-' + i)
            }

            for (let i = 0; i < pageCount; i++) {

                const contentPrint = document.getElementById('contentPrint-' + i);

                html2canvas(contentPrint, {
                    scale: 2, useCORS: true, allowTaint: true, scrollY: 0
                }).then((canvas) => {
.................
........
.....
                    counter = counter + 1;
                    callBack();
                })
            }

            const callBack = () => {
                if (myArray.length === counter) { 
                    pdf.save("filename" + '.pdf')
                    this.$emit("download", this.download);
                }
            }
        },

    

the problem was about my settimeout function. ın there ı would call pdf.save before pdf created and sure every browser works in different speed. so if we use callback function after all process done, then we can obtain our pdf rpint

Answer 2

You could maybe try to simply put

<a href="/your_file.csv" download>

by putting your_file.csv into the static directory.

Not sure if it can be enough in your case, sorry if it's not.