Vue中使用html2canvas和jspdf插件实现导出pdf(自定义html样式可带图片)并下载

旧城等待， 2023-10-01 16:39 6阅读 0赞

## 场景 ##

若依前后端分离版手把手教你本地搭建环境并运行项目：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客\_若依前后端分离文档][BADAO_LIUMANG_QIZHI_-CSDN]

在上面搭建起来框架的基础上，怎样实现前端将html页面的内容导出为pdf。

![64d39bd7cd274127b7184f2f3e09152b.gif][]

### html2canvas官网 ###

[html2canvas - Screenshots with JavaScript][]

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、安装插件

// 将页面 html 转换成图片
    npm install html2canvas --save 
    // 将图片生成 pdf
    npm install jspdf --save

2、页面上添加要导出的html元素

<div class="wrap" >
        <div id="pdfDom" style="padding: 10px;">
          <el-table
            :data="tableData"
            border>
            <el-table-column prop="date" label="日期" width="250"></el-table-column>
            <el-table-column prop="name" label="姓名" width="250"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
          <el-image :src="logo"></el-image>
        </div>
        <button type="button" style="margin-top: 20px;" @click="btnClick">导出PDF</button>
      </div>

其中id为pdfDom的div里面是要导出为pdf的内容

el-image是一张要显示的图片

3、导出按钮的点击事件

btnClick(){
          // 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载
          let top = document.getElementById('pdfDom');
          if (top != null) {
            top.scrollIntoView();
            top = null;
          }
          let title = this.exportPDFtitle;
          html2Canvas(document.querySelector('#pdfDom'), {
            allowTaint: true
          }).then(function (canvas) {
            // 获取canvas画布的宽高
            let contentWidth = canvas.width;
            let contentHeight = canvas.height;
           // 一页pdf显示html页面生成的canvas高度;
            let pageHeight = contentWidth / 841.89 * 592.28;
           // 未生成pdf的html页面高度
            let leftHeight = contentHeight;
           // 页面偏移
            let position = 0;
           // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）
            let imgWidth = 841.89;
            let imgHeight = 841.89 / contentWidth * contentHeight;
            let pageData = canvas.toDataURL('image/jpeg', 1.0);
            let PDF = new JsPDF('l', 'pt', 'a4');
            // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度
            // 当内容未超过pdf一页显示的范围，无需分页
            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 -= 592.28;
                // 避免添加空白页
                if (leftHeight > 0) {
                  PDF.addPage();
                }
              }
            }
            PDF.save(title + '.pdf')
          })
        },

4、完整示例代码

<template>
      <div class="wrap" >
        <div id="pdfDom" style="padding: 10px;">
          <el-table
            :data="tableData"
            border>
            <el-table-column prop="date" label="日期" width="250"></el-table-column>
            <el-table-column prop="name" label="姓名" width="250"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
          <el-image :src="logo"></el-image>
        </div>
        <button type="button" style="margin-top: 20px;" @click="btnClick">导出PDF</button>
      </div>
    </template>
    
    <script>
    // 导出页面为PDF格式
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    import logoImg from '@/assets/logo/logo.png'
    export default {
      name: "ExportPDF",
      data() {
        return {
          logo: logoImg,
          exportPDFtitle: "页面导出PDF文件名",
          tableData: [
             {
              date: '2016-05-06',
              name: '王小虎',
              address: '重庆市九龙坡区火炬大道'
            }, {
              date: '2016-05-07',
              name: '王小虎',
              address: '重庆市九龙坡区火炬大道'
            },{
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-08',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-06',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-06',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            },
          ]
     };
      },
      mounted() {
    
      },
      methods: {
        btnClick(){
          // 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载
          let top = document.getElementById('pdfDom');
          if (top != null) {
            top.scrollIntoView();
            top = null;
          }
          let title = this.exportPDFtitle;
          html2Canvas(document.querySelector('#pdfDom'), {
            allowTaint: true
          }).then(function (canvas) {
            // 获取canvas画布的宽高
            let contentWidth = canvas.width;
            let contentHeight = canvas.height;
           // 一页pdf显示html页面生成的canvas高度;
            let pageHeight = contentWidth / 841.89 * 592.28;
           // 未生成pdf的html页面高度
            let leftHeight = contentHeight;
           // 页面偏移
            let position = 0;
           // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）
            let imgWidth = 841.89;
            let imgHeight = 841.89 / contentWidth * contentHeight;
            let pageData = canvas.toDataURL('image/jpeg', 1.0);
            let PDF = new JsPDF('l', 'pt', 'a4');
            // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度
            // 当内容未超过pdf一页显示的范围，无需分页
            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 -= 592.28;
                // 避免添加空白页
                if (leftHeight > 0) {
                  PDF.addPage();
                }
              }
            }
            PDF.save(title + '.pdf')
          })
        },
      },
    };
    </script>
    
    <style scoped>
    
    </style>

[BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[64d39bd7cd274127b7184f2f3e09152b.gif]: https://img-blog.csdnimg.cn/64d39bd7cd274127b7184f2f3e09152b.gif
[html2canvas - Screenshots with JavaScript]: http://html2canvas.hertzen.com/
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi