vue项目纯前端实现导出pdf文件

1、下载插件

npm install html2canvas
npm install jspdf

2、创建htmlToPdf.js，地址：src/utils/htmlToPdf.js

import html2Canvas from 'html2Canvas'  
import JsPDF from 'jspdf'  
  
export default {  
    install(Vue, options) {  
        Vue.prototype.getPdfFromHtml = function (eleId, pdfFileName, hide) {  
            // 确保传入了正确的元素ID  
            const ele = document.getElementById(eleId);  
            if (!ele) {  
                console.error('No element found with ID:', eleId);  
                return;  
            }  
  
            pdfFileName = pdfFileName || "pdf";  
  
            // 滚动置顶（如果需要）  
            window.pageYOffset = 0; // 或者使用 window.scrollTo(0, 0);  
  
            // ... 其他可能的滚动设置（如果有）  
  
            // 使用html2canvas捕获元素并转换为canvas  
            html2Canvas(ele, {  
                dpi: window.devicePixelRatio * 2, // 根据需要调整DPI  
                useCORS: true, // 允许跨域图片  
                // ... 其他选项  
            }).then(canvas => {  
                // 隐藏加载消息（如果有）  
                this.$message.closeAll(); // 假设您使用的是Element UI的message组件  
  
                // 创建PDF文档并添加canvas内容  
                const pdf = new JsPDF('p', 'mm', 'a4'); // 使用A4纸，横向  
                const imgProps = pdf.getImageProperties(canvas.toDataURL('image/png'));  
  
                // 根据需要添加多页内容（如果需要）  
                let heightLeft = imgProps.height;  
                const top_left_margin = 10; // 您可以根据需要调整边距  
                const pdfWidth = pdf.internal.pageSize.getWidth() - 2*top_left_margin;  
                const pdfHeight = pdf.internal.pageSize.getHeight() - 2*top_left_margin;  
  
                while(heightLeft > 0) {  
                    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', top_left_margin, top_left_margin, pdfWidth, Math.min(pdfHeight, heightLeft));  
                    if (heightLeft > pdfHeight) {  
                        pdf.addPage();  
                    }  
                    heightLeft -= pdfHeight;  
  
                    // 如果需要，可以在此处添加页眉/页脚等  
                }  
  
                // 保存PDF  
                pdf.save(pdfFileName + '.pdf');  
            }).catch(error => {  
                console.error('Error generating PDF:', error);  
                // 显示错误消息（如果需要）  
                this.$message.error('生成PDF时出错');  
            });  
        };  
    }  
};

3、main.js中引入

import htmlToPdf from './utils/htmlToPdf.js'

Vue.use(htmlToPdf)

4、vue页面中使用

在需要打印的块元素上边添加id='pdfDom'

this.GetPdfFromHtml('pdfDom',this.name)