資訊專欄INFORMATION COLUMN
摘要：正常用法引入可查看官方說明根據(jù)不同需求，使用中并沒有想象中那么容易。問題輸入中文時(shí)，生成的內(nèi)容變成亂碼解決方法引入和。。安寢移動(dòng)生行組。
正常用法
引入jspdf.min.js
var doc = new jsPDF()
doc.text("Hello world!", 10, 10)
doc.save("a4.pdf")
api可查看官方說明 jsPDF
根據(jù)不同需求，使用中并沒有想象中那么容易。
問題1：輸入中文時(shí)，生成的pdf內(nèi)容變成亂碼
解決方法：
引入jspdf.customfonts.min.js 和 default_vfs.js
var doc = new jsPDF();
doc.addFont("NotoSansCJKjp-Regular.ttf", "NotoSansCJKjp", "normal");
doc.setFont("NotoSansCJKjp");
doc.text(15, 30, "こんにちは。はじめまして。");
//multi-lines Test
var paragraph = "相次いで廃止された寢臺列車に代わり、いまや夜間の移動(dòng)手段として主力になりつつある夜行バス。「安い」「寢ながら移動(dòng)できる」などのメリットを生かすため、運(yùn)行ダイヤはどのように組まれているのでしょうか。夜遅く出て、朝早く著くというメリット夜行バスを使うメリットといえば、各種アンケートでもいちばん多い回答の「安い」以外に、";
var lines = doc.splitTextToSize(paragraph, 150);
doc.text(15, 60, lines);
doc.save("custom_fonts.pdf");
參考 jsPDF-CustomFonts-support
問題2：如何給文字添加超鏈接
解決方法：
pdf.textWithLink("下載", 30, 40, { url: "https://www.google.com/" });
問題3：導(dǎo)出后的pdf黑黑的一片
解決方法：
由于html內(nèi)容過長，圖片較多較長的時(shí)候。jsPDF無法導(dǎo)出，可以對頁面進(jìn)行分步截取，然后進(jìn)行拼接，還可以進(jìn)行更好的分頁
pdf.addPage();
問題4：分步導(dǎo)出后的pdf還是黑黑的一片
解決方法：
導(dǎo)出PDF時(shí)，先只顯示第一步需要導(dǎo)出的內(nèi)容，導(dǎo)出完畢后，隱藏導(dǎo)出的頁面內(nèi)容，顯示下一步需要導(dǎo)出的頁面內(nèi)容。
以下為部分函數(shù)源碼，可作為參考
var exporting = false;
var progressLen = $(".cut-box").length;
var resultBoxLength = $(".result-box").length;
$(".export-pdf").click(function(){
if(exporting){
return false;
}
exporting = true;
console.log("export-pdf")
// 保存時(shí)先顯示所有測試圖片，隱藏按鈕
var imglen = $("img.lazy").length;
for(var i=0;i" });
pdf.textWithLink("導(dǎo)導(dǎo)導(dǎo)導(dǎo)", 500, 40, { url: "" });
$(".export-pdf").css("display","inline-block");
setProgress(progressIndex);
newHtmlCanvas(pdf,resultBoxIndex,progressIndex);
},
//背景設(shè)為白色（默認(rèn)為黑色）
background: "#fff",
useCORS:true
})
})
//pdf 要輸入的pdf，boxLength循環(huán)長度，h當(dāng)前截取的位置
function newHtmlCanvas(pdf,resultBoxIndex,progressIndex){
console.log("resultBoxIndex:"+resultBoxIndex);
console.log($(".result-box:eq("+resultBoxIndex+") .cut-box:eq(0)").offset().top)
var cutBoxLen = $(".result-box:eq("+resultBoxIndex+") .cut-box").length;
var cutBoxIndex = 1;
if(resultBoxIndex!=0){
pdf.addPage();
}
var firstSub = 0;
if(resultBoxIndex==0){
firstSub = 120;
}
html2canvas(
$(".result-box:eq("+resultBoxIndex+")"),
{
dpi: 172,//導(dǎo)出pdf清晰度
height:$(".result-box:eq("+resultBoxIndex+") .cut-box:eq(0)").offset().top+$(".result-box:eq("+resultBoxIndex+") .cut-box:eq(0)").innerHeight()-firstSub,
onrendered: function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一頁pdf顯示html頁面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
// if(pageHeight>2000){
// pageHeight = 2000
// }
//未生成pdf的html頁面高度
var leftHeight = contentHeight;
//pdf頁面偏移
var position = 20;
//html頁面生成的canvas在pdf中圖片的寬高（a4紙的尺寸[595.28,841.89]）
var imgWidth = 555.28;
var imgHeight = 555.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL("image/jpeg", 1.0);
//有兩個(gè)高度需要區(qū)分，一個(gè)是html頁面的實(shí)際高度，和生成pdf的頁面高度(841.89)
//當(dāng)內(nèi)容未超過pdf一頁顯示的范圍，無需分頁
if(resultBoxIndex==0){
position=80;
// pageHeight = pageHeight -position;
}
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 20, 20, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白頁
if (leftHeight > 0) {
pdf.addPage();
}
}
}
if(cutBoxLen>cutBoxIndex){
console.log("有1個(gè)以上的子cut-box");
$(".result-box:eq("+resultBoxIndex+") .cut-box:eq("+(cutBoxIndex-1)+")").css("display","none");
$(".result-box:eq("+resultBoxIndex+") .cut-box:eq("+(cutBoxIndex)+")").css("display","inline-block");
pdf.addPage();
progressIndex++;
setProgress(progressIndex);
connectHtmlCanvas(pdf,resultBoxIndex,cutBoxLen,cutBoxIndex,progressIndex);
}else{
console.log("只有1個(gè)子cut-box");
if(resultBoxIndex==resultBoxLength-1){
console.log("當(dāng)前為最后一個(gè)resultbox");
console.log("endPage")
pdf.save("content.pdf");
$("#pdfContent").removeClass("exporting");
$(".containte_edit .export-pdf span").html("生成PDF");
$(".result-box").show();
$(".result-box .cut-box").show();
$("body").css({"height":"auto","overflow":"auto"});
exporting = false;
setProgress(0);
}else{
console.log("addPage");
console.log("當(dāng)前不是最后一個(gè)resultbox");
pdf.addPage();
$(".result-box:eq("+(resultBoxIndex+1)+")").show().siblings(".result-box").hide();
resultBoxIndex++;
progressIndex++;
setProgress(progressIndex);
newHtmlCanvas(pdf,resultBoxIndex,progressIndex);
}
}
},
//背景設(shè)為白色（默認(rèn)為黑色）
background: "#fff",
useCORS:true
}
)
}
function connectHtmlCanvas(pdf,resultBoxIndex,cutBoxLen,cutBoxIndex,progressIndex){
console.log("cutBoxLen:"+cutBoxLen+"cutBoxIndex:"+cutBoxIndex);
html2canvas(
$(".result-box:eq("+resultBoxIndex+") .cut-box:eq("+cutBoxIndex+")"),
{
dpi: 172,//導(dǎo)出pdf清晰度
onrendered: function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一頁pdf顯示html頁面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
// if(pageHeight>2000){
// pageHeight = 2000
// }
//未生成pdf的html頁面高度
var leftHeight = contentHeight;
//pdf頁面偏移
var position = 20;
//html頁面生成的canvas在pdf中圖片的寬高（a4紙的尺寸[595.28,841.89]）
var imgWidth = 555.28;
var imgHeight = 555.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL("image/jpeg", 1.0);
//有兩個(gè)高度需要區(qū)分，一個(gè)是html頁面的實(shí)際高度，和生成pdf的頁面高度(841.89)
//當(dāng)內(nèi)容未超過pdf一頁顯示的范圍，無需分頁
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 20, 30, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白頁
if (leftHeight > 0) {
pdf.addPage();
}
}
}
if(cutBoxIndex==cutBoxLen-1){
console.log("當(dāng)前為父div里最后一個(gè)cut-box");
if(resultBoxIndex==resultBoxLength-1){
console.log("當(dāng)前為最后一個(gè)result-box");
pdf.save("content.pdf");
$("#pdfContent").removeClass("exporting");
$(".containte_edit .export-pdf span").html("生成PDF");
$("body").css({"height":"auto","overflow":"auto"});
$(".result-box").show();
$(".result-box .cut-box").show();
exporting = false;
setProgress(0);
}else{
console.log("當(dāng)前不是最后一個(gè)result-box");
$(".result-box:eq("+(resultBoxIndex+1)+")").show().siblings(".result-box").hide();
resultBoxIndex++;
progressIndex++;
setProgress(progressIndex);
newHtmlCanvas(pdf,resultBoxIndex,progressIndex);
}
}else{
console.log("當(dāng)前不是父div里最后一個(gè)cut-box");
$(".result-box:eq("+resultBoxIndex+") .cut-box:eq("+cutBoxIndex+")").css("display","none");
$(".result-box:eq("+resultBoxIndex+") .cut-box:eq("+(cutBoxIndex+1)+")").css("display","inline-block");
cutBoxIndex++;
pdf.addPage();
progressIndex++;
setProgress(progressIndex);
connectHtmlCanvas(pdf,resultBoxIndex,cutBoxLen,cutBoxIndex,progressIndex)
}
},
//背景設(shè)為白色（默認(rèn)為黑色）
background: "#fff",
useCORS:true
}
)
}
// 設(shè)置進(jìn)度條
function setProgress(progressIndex){
var progress = Math.round((progressIndex/progressLen)*100) +"%";
$(".containte_edit .export-pdf i").css("width",progress);
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53361.html
摘要：比上面的稍微好點(diǎn)，支持了一些方面的東西，具體看這個(gè)中文配置參數(shù)評價(jià)這種方法前端實(shí)現(xiàn)，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯(cuò)的。 最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區(qū)。經(jīng)過一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導(dǎo)出pdf一般有這幾種方式，各有各有優(yōu)...
摘要：比上面的稍微好點(diǎn)，支持了一些方面的東西，具體看這個(gè)中文配置參數(shù)評價(jià)這種方法前端實(shí)現(xiàn)，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯(cuò)的。 最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區(qū)。經(jīng)過一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導(dǎo)出pdf一般有這幾種方式，各有各有優(yōu)...
摘要：比上面的稍微好點(diǎn)，支持了一些方面的東西，具體看這個(gè)中文配置參數(shù)評價(jià)這種方法前端實(shí)現(xiàn)，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯(cuò)的。 最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區(qū)。經(jīng)過一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導(dǎo)出pdf一般有這幾種方式，各有各有優(yōu)...
摘要：最近碰到個(gè)需求，需要把當(dāng)前頁面生成，并下載。但這并不是真的截圖，而是通過遍歷頁面結(jié)構(gòu)，收集所有元素信息及相應(yīng)樣式，渲染出。由于只能將它能處理的生成，因此渲染出來的結(jié)果并不是與原來一致。 最近碰到個(gè)需求，需要把當(dāng)前頁面生成pdf，并下載。弄了幾天，自己整理整理，記錄下來，我覺得應(yīng)該會有人需要 ：） 項(xiàng)目源碼地址：https://github.com/linwalker/... html2...
閱讀 1258·2021-11-19 09:40
閱讀 3117·2021-11-02 14:47
閱讀 3050·2021-10-11 10:58
閱讀 3216·2019-08-30 15:54
閱讀 2666·2019-08-30 12:50
閱讀 1721·2019-08-29 16:54
閱讀 462·2019-08-29 15:38
閱讀 1237·2019-08-29 15:19
