Javascript實(shí)現(xiàn)html轉(zhuǎn)pdf高清版（提高分辨率）

第Javascript實(shí)現(xiàn)html轉(zhuǎn)pdf高清版（提高分辨率）

網(wǎng)上一些關(guān)于js實(shí)現(xiàn)html轉(zhuǎn)pdf的文章大部分最終轉(zhuǎn)成的PDF都不夠清晰，今天為大家介紹如何提高js實(shí)現(xiàn)html轉(zhuǎn)pdf的清晰度

引入js文件

https://cdn.bootCSS.com/jquery/3.4.1/jquery.js

/jspdf/1.5.3/jspdf.min.js

/html2canvas/0.5.0-alpha2/html2canvas.min.js

注意事項(xiàng)：

1.生成的pdf中，dom元素間距異常；

2.提高分辨率后，生成的圖片有偏差；

html語(yǔ)句：

divid=demo

/div

JS代碼：

download(){

varelement=$(#demo//這個(gè)dom元素是要導(dǎo)出pdf的div容器

varw=element.width();//獲得該容器的寬

varh=element.height();//獲得該容器的高

varoffsetTop=element.offset().top;//獲得該容器到文檔頂部的距離

varoffsetLeft=element.offset().left;//獲得該容器到文檔最左的距離

varcanvas=document.createElement(canvas

varabs=0;

varwin_i=$(window).width();//獲得當(dāng)前可視窗口的寬度（不包含滾動(dòng)條）

varwin_o=window.innerWidth;//獲得當(dāng)前窗口的寬度（包含滾動(dòng)條）

if(win_owin_i){

abs=(win_o-win_i)/2;//獲得滾動(dòng)條長(zhǎng)度的一半

canvas.width=w*2;//將畫布寬高放大兩倍

canvas.height=h*2;

varcontext=canvas.getContext(2d

context.scale(2,2);

context.translate(-offsetLeft-abs,-offsetTop);

//這里默認(rèn)橫向沒(méi)有滾動(dòng)條的情況，因?yàn)閛ffset.left(),有無(wú)滾動(dòng)條的時(shí)候存在差值，因此

//translate的時(shí)候，要把這個(gè)差值去掉

html2canvas(element).then(function(canvas){

varcontentWidth=canvas.width;

varcontentHeight=canvas.height;

//一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;

varpageHeight=contentWidth/592.28*841.89;

//未生成pdf的html頁(yè)面高度

varleftHeight=contentHeight;

//頁(yè)面偏移

varposition=0;

//a4紙的尺寸[595.28,841.89]，html頁(yè)面生成的canvas在pdf中圖片的寬高

varimgWidth=595.28;

varimgHeight=592.28/contentWidth*contentHeight;

varpageData=canvas.toDataURL(image/jpeg,1.0);

varpdf=newjsPDF(,pt,a4

//有兩個(gè)高度需要區(qū)分，一個(gè)是html頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度(841.89)

//當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)

if(leftHeightpageHeight){

pdf.addImage(pageData,JPEG,0,0,imgWidth,imgHeight);

}else{//分頁(yè)

while(leftHeight0){

pdf.addImage(pageData,JPEG,0,position,imgWidth,imgHeight)

leftHeight-=pageHeight;