Javascript 如何在nuxt项目中下载pdf？

如果我在另一个页面打开我的pdf文件，我也可以预览和下载它。但是我需要在没有路由的情况下直接在我的主组件中涂鸦

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

printPDF（）{
常数html2canvasOptions={
allowTaint:是的，
removeContainer：是的，
图像超时：15000，
日志记录：是的，
乌塞科尔斯：没错，
X:0，
滚动：0，
比例：2，
};
//初始化PDF。
设pdf=newjspdf（'p'，'in'，[8.5,11]，false）；
设totalPage=0
//我有很多页面和页面变化的数量。这取决于。所以首先我计算页面数量并创建pdf。
让pageCount=document.querySelectorAll（“[id^=contentPrint]”）。长度
for（设i=0；i{
const image={type:'jpeg'，质量：1}；
常量边距=[0.5,0.5]；
设imgWidth=8.5；
让pageHeight=11；
设innerPageWidth=imgWidth—边距[0]*2；
让innerPageHeight=pageHeight-页边距[1]*2；
//计算页数。
设pxFullHeight=canvas.height；
设pxPageHeight=Math.floor（canvas.width*（pageHeight/imgWidth））；
设nPages=Math.ceil（pxFullHeight/pxPageHeight）；
totalPage+=nPages
//单独定义页面高度，以便在最终页面上进行修剪。
pageHeight=内部pageHeight；
//创建一个单页画布以分割整个图像。
让pageCanvas=document.createElement（'canvas'）；
让pageCtx=pageCanvas.getContext（'2d'）；
pageCanvas.width=canvas.width；
pageCanvas.height=pxPageHeight；
对于（第0页；第0页）pdf.addPage（）；
让imgData=pageCanvas.toDataURL（'image/'+image.type，image.quality）；
pdf.addImage（imgData，image.type，边距[1]，边距[0]，内页宽，页高）；
}
});
}
设置超时（（）=>{
//pdf.deletePage（总页面+1）
pdf.save（“电子机票”+'.pdf'）
}, 3000)
设置超时（（）=>{
this.$emit（“下载”，this.download）；
}, 4000)
},

---

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

您可以尝试

将

您的_文件.csv

放入

静态

目录

不确定在您的情况下是否足够，如果不够，请道歉。

printPDF（）{
  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)
        },


滚动到（0，0）；
//初始化PDF。
设pdf=newjspdf（'p'，'in'，[8.5,11]，false）；
设totalPage=0
设计数器=0
让myArray=[]
让pageCount=document.querySelectorAll（“[id^=contentPrint]”）。长度
for（设i=0；i{
.................
........
.....
计数器=计数器+1；
回调（）；
})
}
常量回调=（）=>{
如果（myArray.length==计数器）{
保存（“文件名”+“.pdf”）
this.$emit（“下载”，this.download）；
}
}
},

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

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

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