vue前端实现将页面显示内容生成pdf文件的几种方法，html2canvas、dom-to-image、jspdf（带分页）基本使用以及介绍

青旅半醒 2024-04-24 21:00 56阅读 0赞

> 实际开发需求：vue项目中，根据数据结构生成echarts图表组件，生成带有样式的图表以后，点击下载按钮，把图表以pdf格式的文件下载到本地  
> 实现思路：将vue界面的echarts组件生成图片，然后使用插件将生成的图片放入pdf中，再实现pdf文件的下载  
> 涉及框架以及插件：vue、echarts、html2canvas、dom-to-image、jspdf

##### 插件介绍： #####

**vue、echarts** 不用多说，vue前端的框架，echarts用来根据数据生成的带有样式效果的图表；html2canvas与dom-to-image都是将界面上的dom生成图片。

##### html2canvas #####

能够实现在用户浏览器端直接对整个或部分页面进行生成图片，主要是将选中的页面或者整个页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。可以通过获取HTML的某个元素，然后生成Canvas，从而生成图片。

安装
    npm install --save html2canvas
    或 yarn add html2canvas
    引入
    import html2canvas from 'html2canvas';

用法：

<div class="container" id="myDom1">
      测试
    </div>
    <style>
    .container {
      width:100px;
      height:100px;
      background:red;
      color: #ffffff;
    }
    </style>
    methods(){
      getImage(){
        html2canvas(document.querySelector("#myDom1")).then(canvas => {
            console.logo(canvas)
            document.body.appendChild(canvas);
            var dataUrl = canvas.toDataURL("image/png")
        });
      }
    }

<table> 
 <thead> 
  <tr> 
   <th>参数名称</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>allowTaint</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>允许跨域</td> 
  </tr> 
  <tr> 
   <td>background</td> 
   <td>string</td> 
   <td>#fff</td> 
   <td>canvas的背景颜色，如果没有设定默认透明</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>number</td> 
   <td>null</td> 
   <td>canvas高度设定</td> 
  </tr> 
  <tr> 
   <td>letterRendering</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>在设置了字间距的时候有用</td> 
  </tr> 
  <tr> 
   <td>logging</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>输出信息</td> 
  </tr> 
  <tr> 
   <td>proxy</td> 
   <td>string</td> 
   <td>undefined</td> 
   <td>代理地址</td> 
  </tr> 
  <tr> 
   <td>taintTest</td> 
   <td>boolean</td> 
   <td>true</td> 
   <td>是否在渲染前测试图片</td> 
  </tr> 
  <tr> 
   <td>timeout</td> 
   <td>number</td> 
   <td>0</td> 
   <td>图片加载延迟，默认延迟为0，单位毫秒</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>number</td> 
   <td>null</td> 
   <td>canvas的宽度</td> 
  </tr> 
  <tr> 
   <td>useCORS</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>图片跨域问题</td> 
  </tr> 
 </tbody> 
</table>

##### dom-to-image #####

它可以将任意DOM节点转换成用JavaScript编写的矢量（SVG）或光栅（PNG或JPEG）图像。

安装
    npm install dom-to-image
    或 yarn add dom-to-image
    引入
    import domtoimage from 'dom-to-image';
    或 var domtoimage = require('dom-to-image');

基本用法：

<template>
      <div id=""myDom>
        <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>
        ......
      </div>
    </template>
    methods(){
      getDomToImage(){
        let dom = document.getElementById('myDom');
        domtoimage.toPng(dom).then(function (dataUrl) {
            var img = new Image();
            img.src = dataUrl;
            document.body.appendChild(img);
        })
        .catch(function (error) {
            console.error('wrong!', error);
        });
      }
    }

获取一个png的blob：

domtoimage.toBlob(document.getElementById('myDom')).then(function (blob) {
            console.log(blob)
    });

##### jspdf #####

jsPDF 是一个使用 Javascript 语言生成 PDF 的开源库。你可以在 Firefox 插件，服务端脚本或是浏览器脚本中使用它。

安装：
    npm install jspdf
    或 yarn add jspdf
    引入
    import jsPDF from "jspdf"

基本用法：

let pdf = new jsPDF('p', 'pt', 'a4);
    参数1：l：横向  p：纵向
    参数2：单位（"pt"，"mm", "cm", "m", "in" or "px"）
    参数3：格式，默认为“a4”

常用方法：

pdf.addPage()  在PDF文档中添加新页面，参数如下，也可以不设置，默认a4
    pdf.addImage()  将图像添加到PDF中
    pdf.save(`保存的PDF文件.pdf`); 保存为pdf格式的文件

> 回到需求：vue项目中，根据数据结构生成echarts图表组件，生成带有样式的图表以后，点击下载按钮，把图表以pdf格式的文件下载到本地(带分页)，部分代码如下（思路）

###### 1.使用html2canvas ######

<template>
      <div id="pdfDom" ref="pdfDom">
        // 此处存放界面中显示的内容区域，生成pdf的内容区域......
      </div>
    </template>
    
    methods(){
      let node = document.getElementById('pdfDom');
    html2canvas(document.getElementById('pdfDom'), {
    				scale: 2
    			}).then(function (canvas) {
    				var pdfWidth = canvas.width;
    				var pdfHeight = canvas.height;
    				var pageHeight = pdfWidth / 592.28 * 841.89;
    				var leftHeight = pdfHeight;
    				var position = 0;
    				var imgWidth = 595.28;
    				var imgHeight = 595.28 / pdfWidth * pdfHeight;
    				var pageData = canvas.toDataURL("img/jpeg", 1.0);
    				var pdf = new jsPDF('', 'pt', 'a4');
    				// 判断打印dom高度是否需要分页，如果需要进行分页处理
    				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()
    						}
    					}
    				}
    				const aLink = document.createElement('a')
    				document.body.appendChild(aLink)
    				const url = URL.createObjectURL(_this.toBlob(pdf.output('datauristring')))
    				aLink.href = url
    				let date = new Date()
    				let year = date.getFullYear()
    				let month = (date.getMonth() + 1).toString().padStart(2, 0)
    				let day = date.getDate().toString().padStart(2, 0)
    				let hour = date.getHours().toString().padStart(2, 0)
    				let minutes = date.getMinutes().toString().padStart(2, 0)
    				let seconds = date.getSeconds().toString().padStart(2, 0)
    				aLink.download = '保存的PDF文件-' + '.pdf'
    				aLink.click()
    				window.URL.revokeObjectURL(url)
    			})
    }

###### 2.使用dom-to-image ######

<template>
      <div id="pdfDom" ref="pdfDom">
        // 此处存放界面中显示的内容区域，生成pdf的内容区域......
      </div>
    </template>
    
    methods(){
      let node = document.getElementById('pdfDom');
    			domtoimage.toJpeg(node, {
    				width: node.clientWidth,
    				height: node.clientHeight,
    				cacheBust: true,
    				style: {
    					margin: 0,
    					background: '#fff',
    				}
    			}).then(function (dataUrl) {
    					console.log(node.clientWidth)
    					that.canvasWidth = node.clientWidth;
    					that.canvasHeight = node.clientHeight;
    					let imgObj = new Image()
    					imgObj.src = dataUrl;
    					document.documentElement.scrollTop = 0
    					//待图片加载完后，将其显示在canvas上
    					imgObj.onload = function (img) {
    						let canvas = document.getElementById("canvasDom");
    						console.log(canvas.width, canvas.height, 'canvas.width')
    						canvas.getContext("2d").drawImage(imgObj, 0, 0, that.canvasWidth, that.canvasHeight); //将图片绘制到canvas中
    						let contentWidth = canvas.width
    						let contentHeight = canvas.height
    						let pageHeight = contentWidth / 592.28 * 841.89
    						let leftHeight = contentHeight
    						let position = 0
    						let imgWidth = 595.28
    						let imgHeight = 592.28 / contentWidth * contentHeight
    						let pageData = canvas.toDataURL('image/jpeg', 1.0)
    						let PDF = new jsPDF('', 'pt', 'a4')
    						if (leftHeight < pageHeight) {
    							PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) // 大于1页高度时分页
    						} else {
    							while (leftHeight > 0) {
    								PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
    								leftHeight -= pageHeight
    								position -= 841.89
    								if (leftHeight > 0) {
    									PDF.addPage()
    								}
    							}
    						}
    						const aLink = document.createElement('a')
    						document.body.appendChild(aLink)
    						const url = URL.createObjectURL(that.toBlob(PDF.output('datauristring')))
    						aLink.href = url
    						let date = new Date()
    						let year = date.getFullYear()
    						let month = (date.getMonth() + 1).toString().padStart(2, 0)
    						let day = date.getDate().toString().padStart(2, 0)
    						let hour = date.getHours().toString().padStart(2, 0)
    						let minutes = date.getMinutes().toString().padStart(2, 0)
    						let seconds = date.getSeconds().toString().padStart(2, 0)
    						aLink.download = '保存的PDF文件-' + '.pdf'
    						aLink.click()
    						window.URL.revokeObjectURL(url)
    					}
    					return dataUrl
    				})
    				.catch(function (error) {
    					console.error('wrong!', error);
    				});
    }