如何在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>

在我的 nuxt 项目中，我需要在我的主要组件中下载 pdf 文件。当用户单击下载按钮时，它将直接下载而不预览 pdf 组件。所以我将ticket-pdf 组件隐藏在我的主要组件中。这种方式适用于本地主机，但是当我将我的项目发布到测试区域时它不起作用。它只下载 1 个空白页面。我面临这个错误。

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

如果我在其他页面打开我的 pdf 文件，我也可以预览和下载它。但是我需要下载它而不需要在任何地方直接在我的主要组件中路由

  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)
        },

这就是我创建 pdf 区域的方式。当用户单击下载按钮时，我创建 pdf 并下载它，这要归功于我的道具。

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);
                }
            }
        },

    

问题在于我的 settimeout 函数。我会在创建 pdf 之前调用 pdf.save 并确保每个浏览器都以不同的速度工作。所以如果我们在所有过程完成后使用回调函数，那么我们可以获得我们的pdf rpint

Answer 2

你可以试着简单地说

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

将your_file.csv 放入static 目录。

不确定它是否适合您的情况，如果不够，抱歉。