摘要:正常用法引入可查看官方說明根據不同需求,使用中并沒有想象中那么容易。問題輸入中文時,生成的內容變成亂碼解決方法引入和。。安寢移動生行組。
正常用法
引入jspdf.min.js
var doc = new jsPDF() doc.text("Hello world!", 10, 10) doc.save("a4.pdf")
api可查看官方說明 jsPDF
根據不同需求,使用中并沒有想象中那么容易。
問題1:輸入中文時,生成的pdf內容變成亂碼
解決方法:
引入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 = "相次いで廃止された寢臺列車に代わり、いまや夜間の移動手段として主力になりつつある夜行バス。「安い」「寢ながら移動できる」などのメリットを生かすため、運行ダイヤはどのように組まれているのでしょうか。夜遅く出て、朝早く著くというメリット夜行バスを使うメリットといえば、各種アンケートでもいちばん多い回答の「安い」以外に、"; 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:導出后的pdf黑黑的一片
解決方法:
由于html內容過長,圖片較多較長的時候。jsPDF無法導出,可以對頁面進行分步截取,然后進行拼接,還可以進行更好的分頁
pdf.addPage();
問題4:分步導出后的pdf還是黑黑的一片
解決方法:
導出PDF時,先只顯示第一步需要導出的內容,導出完畢后,隱藏導出的頁面內容,顯示下一步需要導出的頁面內容。
以下為部分函數源碼,可作為參考
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") // 保存時先顯示所有測試圖片,隱藏按鈕 var imglen = $("img.lazy").length; for(var i=0;i" }); pdf.textWithLink("導導導導", 500, 40, { url: "" }); $(".export-pdf").css("display","inline-block"); setProgress(progressIndex); newHtmlCanvas(pdf,resultBoxIndex,progressIndex); }, //背景設為白色(默認為黑色) background: "#fff", useCORS:true }) }) //pdf 要輸入的pdf,boxLength循環長度,h當前截取的位置 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,//導出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); //有兩個高度需要區分,一個是html頁面的實際高度,和生成pdf的頁面高度(841.89) //當內容未超過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個以上的子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個子cut-box"); if(resultBoxIndex==resultBoxLength-1){ console.log("當前為最后一個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("當前不是最后一個resultbox"); pdf.addPage(); $(".result-box:eq("+(resultBoxIndex+1)+")").show().siblings(".result-box").hide(); resultBoxIndex++; progressIndex++; setProgress(progressIndex); newHtmlCanvas(pdf,resultBoxIndex,progressIndex); } } }, //背景設為白色(默認為黑色) 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,//導出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); //有兩個高度需要區分,一個是html頁面的實際高度,和生成pdf的頁面高度(841.89) //當內容未超過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("當前為父div里最后一個cut-box"); if(resultBoxIndex==resultBoxLength-1){ console.log("當前為最后一個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("當前不是最后一個result-box"); $(".result-box:eq("+(resultBoxIndex+1)+")").show().siblings(".result-box").hide(); resultBoxIndex++; progressIndex++; setProgress(progressIndex); newHtmlCanvas(pdf,resultBoxIndex,progressIndex); } }else{ console.log("當前不是父div里最后一個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) } }, //背景設為白色(默認為黑色) background: "#fff", useCORS:true } ) } // 設置進度條 function setProgress(progressIndex){ var progress = Math.round((progressIndex/progressLen)*100) +"%"; $(".containte_edit .export-pdf i").css("width",progress); }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99492.html
摘要:比上面的稍微好點,支持了一些方面的東西,具體看這個中文配置參數評價這種方法前端實現,靈活簡單,而且在頁面還原上是很好的,生成的過程不需要自己操心,頁面樣式還可控,可以說是非常不錯的。 最近要搞前端html轉pdf的功能。折騰了兩天,略有所收,踩了一些坑,所以做些記錄,為后來的兄弟做些提示,也算是回饋社區。經過一番調(sou)研(suo)發現html導出pdf一般有這幾種方式,各有各有優...
摘要:比上面的稍微好點,支持了一些方面的東西,具體看這個中文配置參數評價這種方法前端實現,靈活簡單,而且在頁面還原上是很好的,生成的過程不需要自己操心,頁面樣式還可控,可以說是非常不錯的。 最近要搞前端html轉pdf的功能。折騰了兩天,略有所收,踩了一些坑,所以做些記錄,為后來的兄弟做些提示,也算是回饋社區。經過一番調(sou)研(suo)發現html導出pdf一般有這幾種方式,各有各有優...
摘要:比上面的稍微好點,支持了一些方面的東西,具體看這個中文配置參數評價這種方法前端實現,靈活簡單,而且在頁面還原上是很好的,生成的過程不需要自己操心,頁面樣式還可控,可以說是非常不錯的。 最近要搞前端html轉pdf的功能。折騰了兩天,略有所收,踩了一些坑,所以做些記錄,為后來的兄弟做些提示,也算是回饋社區。經過一番調(sou)研(suo)發現html導出pdf一般有這幾種方式,各有各有優...
摘要:最近碰到個需求,需要把當前頁面生成,并下載。但這并不是真的截圖,而是通過遍歷頁面結構,收集所有元素信息及相應樣式,渲染出。由于只能將它能處理的生成,因此渲染出來的結果并不是與原來一致。 最近碰到個需求,需要把當前頁面生成pdf,并下載。弄了幾天,自己整理整理,記錄下來,我覺得應該會有人需要 :) 項目源碼地址:https://github.com/linwalker/... html2...
閱讀 2064·2021-09-22 15:43
閱讀 8618·2021-09-22 15:07
閱讀 1078·2021-09-03 10:28
閱讀 2052·2021-08-19 10:57
閱讀 1061·2020-01-08 12:18
閱讀 2972·2019-08-29 15:09
閱讀 1521·2019-08-29 14:05
閱讀 1640·2019-08-29 13:57