vue2利用html2canvas+jspdf动态生成多页PDF

业务需求中,前端把页面上的内容导出为图片,pdf,excel是常有的事。当然,这些工作后端也是能做。秉着前端是万能的理念,今天就站在前端的角度上,来实现将页面内容导出为pdf,实现指定div内容导出,并自动拼接成一个多页的PDF文件

1.PDF相关依赖

vue2脚手架项目中,关于PDF的依赖老生常用的就那么几个。**pdfmake,vue-print-nb,v-html5-renderer,print-js,html2pdf.js,vue-pdf。**总结起来无非就是达到将内容生成pdf,预览pdf这两个业务场景。

本篇讲的是通过html2canvas+jspdf来动态指定div内容转化为pdf

html2canvas 可以将 HTML 画布(canvas)捕捉为图像,然后 jspdf 可以将这些图像转换为 PDF 格式

第一步先安装依赖

bash 复制代码
npm install jspdf html2canvas --save
# 或者
yarn add jspdf html2canvas

2.效果展示及源码

导出后一个div为一个pdf页面,不足的留空白。超出的会自动加页面补充。假设,你首页想指定一个图片作为封面,中间的一大段内容从第二页开始,自动往后分页。那就设置两个div就行了。

PDF生成后的大致效果

下面附上代码,就一个vue文件,方便各位拿来即用,能立马看到效果:

html 复制代码
<template>
    <div id="pdfinsurancepdf">
        <div style="width: 490pt;margin: auto;">
            <div class="title" style="padding:20pt">
                <el-button type="primary" @click="downpdf">下载PDF</el-button>
                 <el-divider></el-divider>
            </div>
            <div id="page1">
                <img src="@/assets/1.jpg" style="width:100%;height:auto" alt="封面" />
            </div>
            <div id="page2">
                    <template>
                    <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址">
                    </el-table-column>
                    </el-table>
                </template>
                <div>
                    <pre>
当你在凝视着网页的时候
网页也正在凝视着你
流情|导航站
Who is liuqing?

种一棵树最好的时间是十年前,然后就是现在------致想做还未来得及做的你

How lucky to meet you!

你好,这里是流情 Liuqing ,26岁,技术宅,对有趣的世界和可能有趣的你感到好奇,热爱IT和国风文化,
从事互联网产品/Web开发相关工作。希望能与你在比特之海的繁星之下相见!
                    </pre>
                </div>  
            </div>
            <div id="page3">
                <div>
                    <img src="@/assets/2.jpg" style="width:100%;height:auto" alt="结束页" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
export default {
    name:'insurancepdf',
    data() {
        return {
            compony:"pdf导出多页测试",
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
            }
    },
    moutned() {
        console.log(123)
    },
    methods:{
        downpdf(){
            const pdf = new JsPDF('p', 'mm', 'a4');
            var divIds = ['page1', 'page2','page3'];
            const promises = divIds.map(divId => {
                const div = document.getElementById(divId);
                return html2canvas(div, {
                    allowTaint: false,
                    taintTest: false,
                    logging: false,
                    useCORS: true,
                    dpi: window.devicePixelRatio * 1,
                    scale: 2        //画布分辨率
                });
            });
            
            Promise.all(promises).then(canvases => {
                canvases.forEach((canvas, index) => {
                    if (index > 0) {
                        pdf.addPage();
                    }
                    this.addCanvasToPdf(pdf, canvas);
                });
                pdf.save('pdf导出多页测试.pdf');
            }).catch(error => {
                console.error('Error generating PDF:', error);
            });
        },
        addCanvasToPdf(pdf,canvas){
            // 接下来使用canvas创建PDF
            var ctx = canvas.getContext('2d');
            var a4w = 190; var a4h = 277; // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
            var imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度
            var renderedHeight = 0;
            while (renderedHeight < canvas.height) {
            var page = document.createElement('canvas');
                page.width = canvas.width;
                page.height = Math.min(imgHeight, canvas.height - renderedHeight);// 可能内容不足一页
                
                // 用getImageData剪裁指定区域,并画到前面创建的canvas对象中
                page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
                pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); // 添加图像到页面,保留10mm边距
                
                renderedHeight += imgHeight;
                if (renderedHeight < canvas.height) {
                pdf.addPage();// 如果后面还有内容,添加一个空页
                }
                // delete page;
            }
        }
    }
    
}
</script>
<style scoped>
    #pdfinsurancepdf{
        width: 100%;
        background: #fff;
    }
    span{
        line-height: 30pt;
    }
</style>
相关推荐
join82 小时前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星1252 小时前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
穆友航17 小时前
PDF内容提取,MinerU使用
数据分析·pdf
拾荒的小海螺2 天前
JAVA:探索 PDF 文字提取的技术指南
java·开发语言·pdf
村东头老张2 天前
Java 实现PDF添加水印
java·开发语言·pdf
好美啊啊啊啊!2 天前
Thymeleaf模板引擎生成的html字符串转换成pdf
pdf·html
zhentiya2 天前
曼昆《经济学原理》第八版课后答案及英文版PDF
大数据·pdf
三天不学习2 天前
如何解决pdf.js跨域从url动态加载pdf文档
javascript·pdf
吾店云建站2 天前
9个最佳WordPress PDF插件(查看器、嵌入和下载)
程序人生·pdf·创业创新·流量运营·程序员创富·教育电商
007php0072 天前
基于企业微信客户端设计一个文件下载与预览系统
开发语言·python·docker·golang·pdf·php·企业微信