html2canvas实现网页局部存为图片和打印
1.html2canvas.js簡介
html2canvas.js具體來說是一個腳本或者js插件， 該腳本允許您直接在用戶瀏覽器上截取網頁或部分網頁的“內容截圖”。該腳本是基于DOM進行渲染的，所以只支持大部分的css特效，還有就是不支持跨域顯示資源或者顯示frame框架內容等。局限還是挺大的，但是用于普通的頁面（dom）截圖真的是太方便了。
2. 引入html2canvas.js
用插件，當然最便捷的就是使用CDN了。下面是各個版本html2canvas.js的CDN引入地址，點擊進去即可獲得，如果不會引入的請留言。
https://www.bootcdn.cn/html2canvas/
如果想要直接下載插件的，請訪問如下鏈接。
http://html2canvas.hertzen.com/
鼠標選中插件右鍵另存為就好了。不會本地引入的就請勿留言了。
3. 使用html2canvas截圖
最近有需要，做一個電子病歷截圖下載下來。
如下圖，紅色圈圈圈起來的部分是要下載的內容。
截圖的內容如下。
最主要的DOM結構如下：
既然是基于DOM的，那么我們需要的就是需要截圖部分最外層的DOM。
先引入插件
然后是截圖
new html2canvas(document.getElementById('record'), {backgroundColor: "transparent", //png圖片透明allowTaint: true, // 顯示圖片useCORS: true //允許跨域}).then(canvas => {// canvas為轉換后的Canvas對象let oImg = new Image();oImg.src = canvas.toDataURL(); // 導出圖片$("img").attr("src",oImg.src);});這里我將img標簽地址執行了src屬性賦值為截圖地址，通過追蹤發現，src是base64編碼后的數據，
圖片src指向了如圖所示大的一大串字符。這一大串字符就是圖片通過base64編碼后的圖片數據。這里使用截圖就是用img標簽將截圖顯示出來，由此可見，截圖效果還可以，這也是以為我截圖的內容基本都是純dom結構渲染的。
4.下載截圖
下載截圖相對于來說就簡單得多了
就是創建一個a標簽，其href指向圖片地址，設置其download屬性值為你想要保存的圖片名字，這樣就可以了。建議圖片保存格式為png，至于為啥不是jpg，你自己去研究了。
如果這里無法下載的請留言。
5.局部打印
首先，如果是要打印html2canvas所截取下來的圖片，方案是新打開一個窗口，將圖片的src傳遞過去，并設置為body的背景圖片。然后調用window自帶的打印功能進行打印。但是，這里打印的是圖片，所以如果是黑白印刷的話容易出現問題。
于是，采用第二種方案，將要打印部分dom提取出來，然后打開新的瀏覽器窗口，將提取出來的dom結構寫入，然后再執行打印操作。
執行結果如下圖所示
這里之所以沒有背景色，是因為我把背景色的css提取出來了。值得注意的是，使用這種方法時，得將css寫在標簽內部，獨立出來的css是不能通過這種方法表現出來的。因為再獲取dom時無法獲取到其引用的css樣式。
如果大家有更好的方法解決網頁局部截圖的問題，希望能分享出來，我想用更好的東西。
總結
以上是生活随笔為你收集整理的html2canvas实现网页局部存为图片和打印的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 短视频素材怎么找？怎么做短视频运营？
- 下一篇： C语言迷宫如何实现多个关卡,c语言实现迷