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

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);
				});
}
转载请说明出处内容投诉
CSS教程_站长资源网 » vue前端实现将页面显示内容生成pdf文件的几种方法,html2canvas、dom-to-image、jspdf(带分页)基本使用以及介绍

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买