var pdfContent = document.getElementById("pdfDiv");

var width = pdfContent.offsetWidth; //獲取dom 寬度

var height = pdfContent.offsetHeight; //獲取dom 高度

var canvas = document.createElement("canvas"); //創(chuàng)建一個(gè)canvas節(jié)點(diǎn)

var scale = 3; //定義任意放大倍數(shù) 支持小數(shù)，越大越清晰

var offsetTop = pdfContent.offsetTop;

var rect = pdfContent.getBoundingClientRect();//獲取元素相對(duì)于視察的偏移量

canvas.width = width * scale; //定義canvas 寬度 * 縮放

canvas.height = (height + offsetTop) * scale; //定義canvas(高度 +偏移量 )*縮放

var content = canvas.getContext("2d");

content.scale(scale, scale); //獲取context,設(shè)置scale

content.translate(-rect.left, -rect.top);//設(shè)置context位置，值為相對(duì)于視窗的偏移量負(fù)值，讓圖片復(fù)位

var opts = {

background: "#fff",

scale: scale, // 添加的scale 參數(shù)

canvas: canvas, //自定義 canvas

// logging: true, //日志開(kāi)關(guān)，便于查看html2canvas的內(nèi)部執(zhí)行流程

width: width, //dom 原始寬度

height: height,

useCORS: true, // 【重要】開(kāi)啟跨域配置

allowTaint: true,

taintTest: false

};

html2canvas(pdfContent,opts ).then(function (canvas) {

downloadCanvasWithMargin(canvas);

})

//-----------------------

function downloadCanvasWithMargin(canvas){

//關(guān)閉鋸齒

var context = canvas.getContext('2d');

context.mozImageSmoothingEnabled = false;

context.webkitImageSmoothingEnabled = false;

context.msImageSmoothingEnabled = false;

context.imageSmoothingEnabled = false;

let contentWidth = canvas.width;

let contentHeight = canvas.height;

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

let pageHeight = contentWidth / 595.28 * 841.89;

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

let leftHeight = contentHeight;

let cutStartHeight = 0;

let canvasArr = [];

if(leftHeight > pageHeight) {

while (leftHeight > 0) {

//復(fù)制出(0, cutStartHeight)開(kāi)始，contentWidth寬和pageHeight高的圖片

let cutImage = context.getImageData(0, cutStartHeight, contentWidth, pageHeight);

//從圖像底部開(kāi)始校驗(yàn)顏色，直到驗(yàn)證到以白色結(jié)尾才開(kāi)始切圖像

let moveUpPx = 0; //上移px數(shù)

let totalLength = cutImage.data.length;

let lineLength = 4 * contentWidth * 1; //一行的data容量

let leftLength = totalLength - lineLength;

let rightLength = totalLength;

let circle = 0; //循環(huán)次數(shù)

let pointRatio = 0.98; //一行給定顏色的占比系數(shù)

let pointRatioNum = contentWidth * pointRatio;

while( circle === moveUpPx ){

circle ++;

let ignorePoint = 0;

for(let i = leftLength; i< rightLength ; i+=4){

if(cutImage.data[i] === 255 || cutImage.data[i] === 251){

if(cutImage.data[i] === cutImage.data[i+1] && cutImage.data[i] === cutImage.data[i+2]){

ignorePoint++;

}

}

}

if(ignorePoint < pointRatioNum){

leftLength -= lineLength;

rightLength -= lineLength;

moveUpPx ++;

}

}

if(moveUpPx > 0){

cutImage = context.getImageData(0, cutStartHeight, contentWidth, pageHeight - moveUpPx);

}

leftHeight -= pageHeight - moveUpPx;

cutStartHeight += pageHeight - moveUpPx;

//創(chuàng)建新圖片

let nCanvas = document.createElement("canvas"); //創(chuàng)建一個(gè)canvas節(jié)點(diǎn)

nCanvas.width = canvas.width;

nCanvas.height = pageHeight - moveUpPx;

let nContext = nCanvas.getContext("2d");

nContext.mozImageSmoothingEnabled = false;

nContext.webkitImageSmoothingEnabled = false;

nContext.msImageSmoothingEnabled = false;

nContext.imageSmoothingEnabled = false;

nContext.putImageData(cutImage, 0, 0)

canvasArr.push(nCanvas);

}

}else{

canvasArr.push(canvas);

}

//處理尾頁(yè)圖片透明背景

let lastCanvas = canvasArr[canvasArr.length - 1];

let ctx = lastCanvas.getContext("2d");

// 將canvas的透明背景設(shè)置成白色--解決translate后便黑色背景的問(wèn)題

let imageData = ctx.getImageData(0, 0, lastCanvas.width, lastCanvas.height);

for(var i = 0; i < imageData.data.length; i += 4) {

// 當(dāng)該像素是透明的，則設(shè)置成白色

if(imageData.data[i + 3] === 0) {

imageData.data[i] = 255;

imageData.data[i + 1] = 255;

imageData.data[i + 2] = 255;

imageData.data[i + 3] = 255;

}

}

ctx.putImageData(imageData, 0, 0);

var pdf = new jsPDF('', 'pt', 'a4');

let leftMargin = 20;

let topMargin = 20;

let a4Width = 595.28;

let a4Height = 841.89;

let imgWidth = a4Width - leftMargin * 2;

let imgHeight = a4Height - 2 * topMargin;

for(let i =0; i < canvasArr.length; i++){

let curCanvas = canvasArr[i];

let pageData = curCanvas.toDataURL('image/jpeg', 1.0);

//小于切分的高度，要換算比例高

if(curCanvas.height < pageHeight){

let ratioHeight = imgWidth / curCanvas.width * curCanvas.height;

pdf.addImage(pageData, 'JPEG', leftMargin, topMargin, imgWidth, ratioHeight);

}else{

pdf.addImage(pageData, 'JPEG', leftMargin, topMargin, imgWidth, imgHeight);

}

if(i < (canvasArr.length-1)){

pdf.addPage();

}

}

let date = new Date();

let year = date.getFullYear();

let month = date.getMonth() + 1;

let day = date.getDate();

let milliSeconds = date.getMilliseconds();

pdf.save(year + month + day + milliSeconds +'.pdf');

}

總結(jié)

以上是生活随笔為你收集整理的html文本下一页,Javascript html2canvas + jsPDF 导出PDF，解决一半文字在上一页一半文字在下一页的问题...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。