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

实际开发需求：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")

    });

  }

}

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

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);

				});

}

巴特西