方案一
window.print瀏覽器打印是一個非常成熟的東西公条，直接調(diào)用window.print或者document.execCommand('print')達(dá)到打印及保存效果剪菱，Mac徽標(biāo)鍵加p直接調(diào)用查看效果更米，windows可以ctrl+p查看效果
問題
- 樣式的調(diào)節(jié)
- 隱藏某些頁面不相關(guān)內(nèi)容
- A4紙界面的適應(yīng)
解決方案
1.媒介查詢
p {
font-size: 12px;
}
@media print {
p {
font-size: 14px;
}
}
// 隱藏部分內(nèi)容
@media print {
span {
display:none
}
}
2.替換body內(nèi)容
根據(jù)id獲取需要打印的節(jié)點innderHTML舍杜，并將body內(nèi)容進(jìn)行替換，執(zhí)行打印卒茬，打印完成后银锻，還原body內(nèi)容。
<body>
<input type="button" value="打印此頁面" onclick="printpage()" />
<div id="printContent">打印內(nèi)容</div>
<script>
function printpage() {
let newstr = document.getElementById("printContent").innerHTML;
let oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
</body>
3.打印事件監(jiān)聽
通過打印前事件onbeforeprint及打印后事件onafterprint() 進(jìn)行打印元素的隱藏及展示
window.onbeforeprint = function(event) {
//隱藏?zé)o關(guān)元素
};
window.onafterprint = function(event) {
//展示無關(guān)元素
};
方案二
使用
- 1.安裝：
npm install --save htmlcanvas2npm install --save jspdf - 2.繪制較短頁面
新建htmlToPdf.js導(dǎo)出文件
// utils/htmlToPdf.js：導(dǎo)出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
// id-導(dǎo)出pdf的div容器遭京；title-導(dǎo)出文件標(biāo)題
Vue.prototype.htmlToPdf = (id, title) => {
const element = document.getElementById(`${id}`)
const opts = {
scale: 12, // 縮放比例胃惜，提高生成圖片清晰度
useCORS: true, // 允許加載跨域的圖片
allowTaint: false, // 允許圖片跨域，和 useCORS 二者不可共同使用
tainttest: true, // 檢測每張圖片已經(jīng)加載完成
logging: true // 日志開關(guān)哪雕，發(fā)布的時候記得改成 false
}
html2Canvas(element, opts)
.then((canvas) => {
console.log(canvas)
const contentWidth = canvas.width
const contentHeight = canvas.height
// 一頁pdf顯示html頁面生成的canvas高度;
const pageHeight = (contentWidth / 592.28) * 841.89
// 未生成pdf的html頁面高度
let leftHeight = contentHeight
// 頁面偏移
let position = 0
// a4紙的尺寸[595.28,841.89]船殉，html頁面生成的canvas在pdf中圖片的寬高
const imgWidth = 595.28
const imgHeight = (592.28 / contentWidth) * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
console.log(pageData)
// a4紙縱向，一般默認(rèn)使用斯嚎；new JsPDF('landscape'); 橫向頁面
const PDF = new JsPDF('', 'pt', 'a4')
// 當(dāng)內(nèi)容未超過pdf一頁顯示的范圍利虫，無需分頁
if (leftHeight < pageHeight) {
// addImage(pageData, 'JPEG', 左，上堡僻，寬度糠惫，高度)設(shè)置
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
// 超過一頁時，分頁打佣ひ摺（每頁高度841.89）
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
})
.catch((error) => {
console.log('打印失敗', error)
})
}
}
}
ndex.vue中使用導(dǎo)出方法
<template>
<div>
<div
id="pdfDom"
>
測試數(shù)據(jù)
</div>
<el-button type="primary" round style="background: #4849FF" @click="btnClick">導(dǎo)出PDF</el-button>
</div>
</template>
<script>
import JsPDF from 'jspdf'
import html2Canvas from 'html2canvas'
mounted() {
// 導(dǎo)出pdf
btnClick() {
this.$nextTick(() => {
this.htmlToPdf('pdfDom', '個人報告')
})
},
},
</script>
問題及解決方案
1.頁面繪制轉(zhuǎn)碼時間過長
可以考慮在頁面初始化完成后就對頁面進(jìn)行抓取繪制及轉(zhuǎn)碼硼讽，將轉(zhuǎn)碼數(shù)據(jù)保存，在點擊下載時直接生成pdf并保存牲阁。
2.html2canvas能夠抓取的頁面長度大約為1440固阁，兩個A4頁面左右，超出不會抓取城菊，需要控制多個節(jié)點备燃，循環(huán)繪制。
繪制多個節(jié)點
新建htmlToPdf.js導(dǎo)出文件
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
// id-導(dǎo)出pdf的div容器凌唬；title-導(dǎo)出文件標(biāo)題
Vue.prototype.htmlToPdf = (name, title) => {
const element = document.querySelectorAll(`.${name}`)
let count = 0
const PDF = new JsPDF('', 'pt', 'a4')
const pageArr = []
const opts = {
scale: 12, // 縮放比例并齐，提高生成圖片清晰度
useCORS: true, // 允許加載跨域的圖片
allowTaint: false, // 允許圖片跨域，和 useCORS 二者不可共同使用
tainttest: true, // 檢測每張圖片已經(jīng)加載完成
logging: true // 日志開關(guān)，發(fā)布的時候記得改成 false
}
for (const index in Array.from(element)) {
html2Canvas(element[index], opts).then(function(canvas) {
// a4紙的尺寸[595.28,841.89]冀膝，html頁面生成的canvas在pdf中圖片的寬高
const contentWidth = canvas.width
const contentHeight = canvas.height
const imgWidth = 595.28
const imgHeight = (592.28 / contentWidth) * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
// 一頁pdf顯示html頁面生成的canvas高度;
const pageHeight = (contentWidth / 592.28) * 841.89
// 未生成pdf的html頁面高度
const leftHeight = contentHeight
pageArr[index] = { pageData: pageData, pageHeight: pageHeight, leftHeight: leftHeight, imgWidth: imgWidth, imgHeight: imgHeight }
if (++count === element.length) {
// 轉(zhuǎn)換完畢唁奢，可進(jìn)行下一步處理 pageDataArr
let counts = 0
for (const data of pageArr) {
// 頁面偏移
let position = 0
// 轉(zhuǎn)換完畢，save保存名稱后瀏覽器會自動下載
// 當(dāng)內(nèi)容未超過pdf一頁顯示的范圍窝剖，無需分頁
if (data.leftHeight < data.pageHeight) {
// addImage(pageData, 'JPEG', 左麻掸，上，寬度赐纱，高度)設(shè)置
PDF.addImage(data.pageData, 'JPEG', 0, 0, data.imgWidth, data.imgHeight)
} else {
// 超過一頁時脊奋，分頁打印（每頁高度841.89）
while (data.leftHeight > 0) {
PDF.addImage(data.pageData, 'JPEG', 0, position, data.imgWidth, data.imgHeight)
data.leftHeight -= data.pageHeight
position -= 841.89
if (data.leftHeight > 0) {
PDF.addPage()
}
}
}
if (++counts === pageArr.length) {
PDF.save(title + '.pdf')
} else {
// 未轉(zhuǎn)換到最后一頁時疙描，pdf增加一頁
PDF.addPage()
}
}
}
})
}
}
}
}
index.vue中使用導(dǎo)出方法
<template>
<div>
<div
class="pdfDom"
>
測試數(shù)據(jù)
</div>
<div
class="pdfDom"
>
測試數(shù)據(jù)2
</div>
<div
class="pdfDom"
>
測試數(shù)據(jù)3
</div>
<el-button type="primary" round style="background: #4849FF" @click="btnClick">導(dǎo)出PDF</el-button>
</div>
</template>
<script>
import JsPDF from 'jspdf'
import html2Canvas from 'html2canvas'
mounted() {
// 導(dǎo)出pdf
btnClick() {
this.$nextTick(() => {
this.htmlToPdf('pdfDom', '個人報告')
})
},
},
</script>
方案三（推薦）
puppeteer(中文翻譯”操縱木偶的人”) 是 Google Chrome 團(tuán)隊官方的無界面（Headless）Chrome 工具诚隙，它是一個 Node 庫，提供了一個高級的 API 來控制 DevTools協(xié)議上的無頭版[5] Chrome 起胰。也可以配置為使用完整（非無頭）的 Chrome久又。
Puppeteer 能做些什么
- 生成頁面的截圖和PDF。
- 抓取SPA并生成預(yù)先呈現(xiàn)的內(nèi)容（即“SSR”）效五。
- 從網(wǎng)站抓取你需要的內(nèi)容地消。
- 自動表單提交，UI測試畏妖，鍵盤輸入等
- 創(chuàng)建一個最新的自動化測試環(huán)境脉执。使用最新的JavaScript和瀏覽器功能，直接在最新版本的Chrome中運行測試戒劫。
- 捕獲您的網(wǎng)站的時間線跟蹤半夷，以幫助診斷性能問題。
我們只需關(guān)注并使用生成頁面的截圖PDF功能
Puppeteer的使用
使用express框架搭建簡單的node服務(wù) 安裝:npm i puppeteer 或 yarn add puppeteer
1.單個頁面生成
var express = require('express');
var app = express();
// 路由中間件：get請求"/"資源
app.get('/', function (req, res) {
res.send('Hello11 World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
//指定存放pdf的文件夾
const folder = 'vueDoc'
fs.mkdir(folder, () => { console.log('文件夾創(chuàng)建成功') })
//啟動無頭瀏覽器
const browser = await puppeteer.launch({ headless: true }) //PDF 生成僅在無界面模式支持, 調(diào)試完記得設(shè)為 true
const page = await browser.newPage();
await page.goto('https://cn.vuejs.org/v2/guide/index.html'); //默認(rèn)會等待頁面load事件觸發(fā)
//指定生成的pdf文件存放路徑
await page.pdf({ path: `./vueDoc/guide.pdf` });
//關(guān)閉頁面
page.close()
//關(guān)閉 chromium
browser.close();
})()
2.根據(jù)頁面?zhèn)冗厵谘h(huán)生成多個頁面
var express = require('express');
var app = express();
// 路由中間件：get請求"/"資源
app.get('/', function (req, res) {
res.send('Hello11 World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
//指定存放pdf的文件夾
const folder = 'vueDoc'
fs.mkdir(folder, () => { console.log('文件夾創(chuàng)建成功') })
//啟動無頭瀏覽器
const browser = await puppeteer.launch({ headless: true }) //PDF 生成僅在無界面模式支持, 調(diào)試完記得設(shè)為 true
const page = await browser.newPage();
await page.goto('https://cn.vuejs.org/v2/guide/index.html'); //默認(rèn)會等待頁面load事件觸發(fā)
// 1) 已知Vue文檔左側(cè)菜單結(jié)構(gòu)為：.menu-root>li>a
// 獲取所有一級鏈接
const urls = await page.evaluate(() => {
return new Promise(resolve => {
const aNodes = $('.menu-root>li>a')
const urls = aNodes.map(n => {
return aNodes[n].href
})
resolve(urls);
})
})
// 2）遍歷 urls, 逐個訪問并生成 pdf
let successUrls = [], failUrls = [] // 用于統(tǒng)計成功迅细、失敗情況
for (let i = 17; i < urls.length; i++) {
const url = urls[i],
tmp = url.split('/'),
fileName = tmp[tmp.length - 1].split('.')[0]
try {
await page.goto(url); //默認(rèn)會等待頁面load事件觸發(fā)
await page.pdf({ path: `./${folder}/${i}_${fileName}.pdf` }); //指定生成的pdf文件存放路徑
console.log(`${fileName}.pdf 已生成巫橄！`)
successUrls.push(url)
} catch {
//如果頁面打開超時，會拋出錯誤疯攒。為了保證后面的頁面生成不被影響嗦随，這里做一下容錯處理列荔。
failUrls.push(url)
console.log(`${fileName}.pdf 生成失斁闯摺！`)
continue
}
}
console.log(`PDF生成完畢贴浙！成功 ${successUrls.length}個砂吞，失敗 ${failUrls.length}個`)
console.log(`失敗詳情：${failUrls}`)
//TODO: 失敗重試
page.close()
browser.close();
})()
總結(jié)
以上三種方式各有利弊，html2+canvas雖然使用簡單方便但性能較差崎溃，用戶體驗較差蜻直，需要慢慢調(diào)整，最難受的是生成的是圖片，打開緩慢概而，有卡頓呼巷，并且不能復(fù)制文字，服務(wù)端使用puppeteer其實是目前來看較為妥當(dāng)?shù)姆桨甘旯澹切枰蠖朔?wù)支持王悍。
