一、將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 后的區別：
