PC端网页项目将网页内容生成为PDF

前言：后台查看结果，有一堆图表数据，老板想给报告导出为 PDF，于是。。。

一、原生 HTML+CSS+JS 项目

html2pdf 文档

<!-- 直接引入html2pdf -->
<script src="https://cdn.bootcdn.net/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
//使用DOM操作获取到要存为PDF的元素
var element = document.getElementsByClassName("multidimensional")[0];
//配置PDF的参数，详细配置见文档
var opt = {
	margin: 0.3,
	filename: "name.pdf",
	image: { type: "jpeg", quality: 1 },
	html2canvas: { scale: 2 },
	jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
};
//存为PDF
html2pdf().set(opt).from(element).save();

如果有需要分页的元素，在元素后面加上下面代码即可

<div class="html2pdf__page-break"></div>

二、vue 项目

1. 使用 vue-html2pdf 插件，个人感觉比较好用，和上面那个类似

vue-html2pdf 文档

使用下面命令安装 vue-html2pdf

npm i vue-html2pdf

在 vue 组件下使用

<template>
	<div>
		<!-- 具体说明看文档 -->
		<vue-html2pdf
        	:show-layout="false"
        	:float-layout="true"
        	:enable-download="true"
        	:preview-modal="true"
        	:paginate-elements-by-height="1400"
        	filename="name"
        	:pdf-quality="2"
        	:manual-pagination="false"
        	pdf-format="a4"
        	pdf-orientation="landscape"
        	pdf-content-width="800px"
        	@progress="onProgress($event)"
        	@hasStartedGeneration="hasStartedGeneration()"
        	@hasGenerated="hasGenerated($event)"
        	ref="html2Pdf"
		>
			<section slot="pdf-content">
				<!-- 这里写要生成PDF的元素 -->
			</section>
		</vue-html2pdf>
	</div>
</template>
//引入vue-html2pdf
import VueHtml2pdf from "vue-html2pdf";
export default {
	components: {
		//注册组件
		VueHtml2pdf
	},
    methods: {
    	//声明下载为PDF的方法
		generateReport () {
			this.$refs.html2Pdf.generatePdf()
		}
	},
}

属性	值	描述	个人想法
show-layout	true/false	是否显示要转为 PDF 的元素	调式要转出的元素的布局时 true，平时 false
float-layout	true/false	如果道具设置为 false 道具 show-layout 将被覆盖。布局不会浮动，并且布局将始终显示。	我一直使用的 true，因为做的时候做了两份，一个是在后台显示的，一个是导出为 PDF 的，布局不一样
enable-download	true/false	是否开启下载，为 true 时调用上面的下载方法默认弹出下载	看自己需求
preview-modal	true、false	是否弹出转 PDF 后的预览模板，为 true 时调用上面的下载方法默认弹出预览模板	调试时开启，完工后关闭
paginate-elements-by-height	任何数字	输入的数字将用于对元素进行分页，数字仅以 px 为单位。	官方默认 1400，没动过
filename	任何字符串	导出后的默认 PDF 文件名	自定义
pdf-quality	0 - 2（可以有小数）	2 是最高质量，0.1 是最低质量，0 将使 PDF 消失。	官方虽然说是 0~2，但是我调 5 也是更高清了
manual-pagination	true/false	为 true 时不会自动对元素进行分页。为 false 时分页将依赖于具有“html2pdf__page-break”类的元素来知道在哪里分页，也就是下面所写的	我一直使用的 false，看需求
pdf-format	a0, a1, a2, a3, a4, letter, legal, a5, a6, a7, a8, a9, a10	这是 PDF 格式（纸张尺寸）	我使用的 a4 纸，所以 a4
pdf-orientation	portrait, landscape	PDF 方向，landscape 是横向，portrait 是纵向	看需求
pdf-content-width	任何 css 尺寸（例如“800px”、“65vw”、“70%”）	PDF 内容宽度	800px 应该是 a4 最大的尺寸，具体边距我使用的 padding
html-to-pdf-options	没用过	不知道	具体看官方文档
下面那几个方法	我也没有使用到	暂时不写了	具体可以看官方文档

如果有需要分页的元素，在元素后面加上下面代码即可

<div class="html2pdf__page-break"></div>

实测了一下，一页大概是 800px*1123px，用的是 1920*1080 的分辨率的屏幕 2. 使用 html2canvas+jspdf 插件，个人感觉不是太好用，不可以自定义分页，边距也不好调

html2canvas 官方文档 和 jspdf 官方文档

使用以下命令进行下载

npm install html2canvas jspdf --save

在使用的组件中引入

import html2canvas from "html2canvas";
import JsPDF from "jspdf";
export default{
	methods:{
		downLoad(){
			//使用DOM操作获取到需要保存为PDF的元素
			var element = document.getElementsByClassName("multidimensional")[0];
			//然后这么一堆玩意，我也不知道具体的用法，用过，但是没办法像上面的那个自定义换页，所以没深究
			window.pageYOffset = 0;
      		document.documentElement.scrollTop = 0;
      		document.body.scrollTop = 0;
      		html2canvas(element, {
        		allowTaint: true,
        		scale: 2,
        		dpi: 182, //导出图片清晰度
      		}).then(function(canvas) {
        		let contentWidth = canvas.width;
        		let contentHeight = canvas.height;
        		//一页pdf显示html页面生成的canvas高度;
        		let pageHeight = (contentWidth / 592.28) * 841.89;
        		//未生成pdf的html页面高度
        		let leftHeight = contentHeight;
        		//页面偏移
        		let position = 0;
        		let imgWidth = 595.28;
        		let imgHeight = (592.28 / contentWidth) * contentHeight;
        		//返回图片dataURL，参数：图片格式和清晰度(0-1)
        		let pageData = canvas.toDataURL("image/jpeg", 1.0);
        		//方向默认竖直，尺寸ponits，格式 a4纸 [595.28,841.89]
        		let PDF = new JsPDF("", "pt", "a4");
        		//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        		//当内容未超过pdf一页显示的范围，无需分页
        		if (leftHeight < pageHeight) {
          			//addImage将图片添加到pdf中
          			//addImage中间两个参数控制x、y边距，
          			//后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
          			PDF.addImage(pageData, "JPEG", 20, 20, imgWidth - 40, imgHeight - 40);
        		} else {
          			while (leftHeight > 0) {
            			PDF.addImage(pageData, "JPEG", 20, position, imgWidth - 40, imgHeight - 40);
            			leftHeight -= pageHeight;
            			position -= 841.89;
            			//避免添加空白页
            			if (leftHeight > 0) {
              				//addPage()添加pdf页数
              				PDF.addPage();
            			}
          			}
        		}
        		console.log(imgWidth, imgHeight);
        		//保存名称
        		PDF.save("name.pdf");
      		});
		}
	}
}

❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀

Written ❤️ sywdebug.