随笔 - 419  文章 - 3  评论 - 331  阅读 - 120万

Vue+ElementUI 导出为PDF文件

在ElementUI中导出PDF通常涉及将页面上的DOM元素转换为PDF格式的文件。这一过程可以通过结合使用 html2canvas 和 jsPDF 这两个JavaScript库来实现。

步骤:

1、安装依赖

在项目中安装html2canvasjsPDF这两个库。可以通过npm进行安装:

npm install html2canvas jspdf

2、创建导出函数

创建一个JavaScript文件(例如 htmlToPdf.js),并在其中定义导出PDF的函数。以下是一个示例函数:

复制代码
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export function getPdf(elementId, pdfName) {
    const element = document.getElementById(elementId);
    
    html2canvas(element, {
        useCORS: true, // 允许跨域请求外部链接图片
        allowTaint: true // 允许canvas污染
    }).then(canvas => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        
        const pageHeight = contentWidth / 592.28 * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        const imgWidth = 595.28;
        const imgHeight = (contentHeight * imgWidth) / contentWidth;
        
        const pageData = canvas.toDataURL('image/jpeg', 1.0);
        
        const pdf = new jsPDF('', 'pt', 'a4');
        
        if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else {
            while (leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                
                if (leftHeight > 0) {
                    pdf.addPage();
                }
            }
        }
        
        pdf.save(pdfName + '.pdf');
    }).catch(error => {
        console.error('Error during PDF generation:', error);
    });
}
复制代码

3、在Vue组件中使用

在需要导出PDF的Vue组件中引入并使用这个函数。

例如:

复制代码
<template>
    <div>
        <!-- 要导出的内容 -->
        <div id="exportContent">
            <!-- 这里放置要导出的HTML内容 -->
        </div>
        <!-- 导出按钮 -->
        <el-button type="primary" @click="exportPdf">导出PDF</el-button>
    </div>
</template>

<script>
import { getPdf } from './htmlToPdf'; // 引入导出的函数

export default {
    methods: {
        exportPdf() {
            getPdf('exportContent', '导出的文件名'); // 调用导出函数,并传入要导出的DOM元素的ID和PDF文件名
        }
    }
}
</script>
复制代码

4、注意事项

  • 分页处理:如果导出的内容超过一页,需要处理分页逻辑。上面的示例代码中已经包含了分页处理的逻辑。
  • 样式调整:为了确保导出的PDF文件样式正确,可能需要对要导出的DOM元素进行样式调整。例如,可以使用CSS来控制元素的布局和样式。
  • 跨域问题:如果导出的内容中包含跨域的图片或其他资源,需要确保服务器允许跨域请求,或者在html2canvas的配置中设置useCORS: true
  • 滚动条处理:如果导出的内容在页面中存在滚动条,需要确保在生成PDF时能够正确处理滚动条的位置和大小。

 

posted on   JoeYoung  阅读(147)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
历史上的今天:
2008-11-19 HTML下的默认样式属性
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示