一、将HTML 网页内容转换为图片
使用 html2canvas 来截屏。
html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。
1.1 首先引入 html2canvas 插件
-
可以使用
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>脚本引入。 -
也可以使用 npm 或 yarn 安装，
npm install --save html2canvas，yarn add html2canvas，然后在需要的模块中导入该插件import html2canvas from 'html2canvas'
1.2 使用方法
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
该函数返回一个包含
<canvas>元素的 Promise。只需使用 then 来接收 Promise 返回的 resolve 的内容。
1.3. 使用
- 定义一个用来执行导出功能的按钮，来模拟点击一个链接，这个链接包含 download 下载属性，可以下载文件（含图片）。
<!-- 隐藏该链接 -->
<a
id="exportImgLink"
class="export-img-link"
:download="exportName + '.png'"
>
<img id="exportImg" class="export-img" alt="百科月报导出数据图" />
</a>
<button class="export-btn" @click="exportData">导出</button>
exportData() {
html2canvas(document.querySelector('#screenshotsSection'), {
scale: 2, //放大一倍，使图像清晰一点
}).then((canvas) => {
const exportImgEle = document.querySelector('#exportImg');
const exportImgLinkEle = document.querySelector('#exportImgLink');
exportImgEle.src = canvas.toDataURL('image/png');
exportImgLinkEle.href = canvas.toDataURL('image/png');
exportImgLinkEle.click(); // 执行 <a> 元素的下载
});
},
上例中，需要将 <a> 元素隐藏，这里只是使用 <a> 元素模拟，真正点击的是导出按钮。另外 <a> 元素的 download 属性就是下载下来的图片的名称。如果 exportName='data-overview'，那下载的图片名就是 data-overview。
二、将 HTML 网页内容转换为 PDF 文件
使用 jsPDF 来生成 PDF
jsPDF 是一个使用Javascript语言生成PDF的开源库
jsPDF 通过生成的图片插入到 PDF 中，生成 PDF 。
2.1 引入 jsPDF 插件
-
可以使用
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/2.0.0/jspdf.es.min.js"></script>脚本引入。 -
也可以使用 npm 或 yarn 安装，
npm install --save jspdf，yarn add jspdf，然后在需要的模块中导入该插件import jspdf from 'jspdf'
2.2 使用方法
var imgData = 'data:image/jpeg;base64.............'
var doc = new jsPDF()
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160)
先将图片使用二进制数据格式字符串来表示（包含图片展示 data URI），然后使用 new jsPDF() 来初始化一个 pdf 对象，最后将图片装入 pdf，并设置图片格式，在 pdf 的中的位置 (top, left)， 和尺寸（width, height）。
2.3 使用
因为需要图片的 data URI。可以使用 HTMLCanvasElement.toDataURL() 方法。于是可以采用上面 html2canvas ，先转换为 canvas ，在通过 toDataURL() 方法得到图片的 data UR。
// 生成数据，图片格式质量1.0(最佳)
const pageData = canvas.toDataURL('image/jpeg', 1.0);
// 图片的大小
const pdfWidth = 210;
// a4 纸大小 210mm*297mm, 页边距上下左右分别为 25mm
const pdf = new jspdf('p', 'mm', 'a4');
pdf.addImage(
pageData,
'JPEG',
25,
25,
pdfWidth - 50,
((pdfWidth - 50) / canvas.width) * canvas.height
);
// 保存
pdf.save(`${this.exportName}.pdf`);
实例化 jspdf 时，
第一个参数是方向，如果是'p'，则是正向，如果是 'l'， 则是反向，意味着 pdf 为横向，图片嵌入到 pdf 中左侧，那么 pdf 右侧将会空出来一部分；
第二个参数是单位，这里取 'mm' 毫米。
第三个参数是纸张类型，这里取 'a4' ，也可以取 'a5' ，不过 'a4' 纸在打印中用的更多。
addImage() 方法中，
第三个参数是距离，图片距离 pdf 顶部距离，25mm；
第四个参数是距离，图片距离 pdf 左侧距离，25mm；
第五个参数是尺寸，图片宽度，为 pdf 宽度减去左右留白 25mm * 2 = 50mm；
第四个参数是尺寸，根据 pdf 宽度和生成的图片的原始尺寸的宽高比计算出来，避免被拉伸而变形。
点击导出，将生成 pdf 文件：
下面显示 new jspdf('p', 'mm', 'a4'); 和 new jspdf('l', 'mm', 'a4'); 生成 pdf 后的区别：
