將HTML頁面轉換為PDF文件并導出

Airy 發布于2019-08-22 14:56 / 1998人閱讀

摘要：目前，在大多數的管理系統中，都會有這樣一個功能根據相關的條件查詢相應的數據，并生成可視化報表，然后可導出為文件。利用將新的元素生成圖片利用將圖片生成文件并保存到本地。

目前，在大多數的管理系統中，都會有這樣一個功能：根據相關的條件查詢相應的數據，并生成可視化報表，然后可導出為PDF文件。本文只展現生成可視化報表之后導出PDF文件的過程，生成可視化的報表可使用Echarts，D3js等框架。

1.需要引入的文件

html2canvas.js（根據實際情況選擇相應的版本）
jspdf.min.js（根據實際情況選擇相應的版本）

2.實現思路

（1）在body中將需要生成PDF的HTML復制一份，切記：如果元素中含有ID，則必須重新給定
（2）將新的元素設置為position:absolute; 脫離文檔流，因為處于文檔流中被瀏覽器遮擋的部分不會生成PDF。
（3）利用html2canvas.js將新的元素生成圖片
（4）利用jspdf.min.js將圖片生成PDF文件并保存到本地。

3.實現代碼

(1)HTML代碼
 
/*將要生成PDF的HTML代碼*/

………………………………
 

(2)JS代碼

/*復制元素，注意ID*/
$("body").append("…………………………………………………………");
/*設置新元素樣式*/
 $("#pdf1").css({
    "background-color": "#fff",
    "position": "absolute",
    "top": "0px",
    "z-index": "-1",
    "height": $("#pdf").height()
});
/*html2canvas生成圖片，jspdf生成PDF文件*/
html2canvas($("#pdf1"), {
    background: "#fff",
    allowTaint: true,
    taintTest: false,
    onrendered:function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pageHeight = contentWidth / 592.28 * 841.89;
        var leftHeight = contentHeight;
        var position = 0;
        var imgWidth = 595.28;
        var imgHeight = 592.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var img = new Image();
        img.src = pageData;
        var pdf = new jsPDF("p", "pt", "a4");
        img.onload = function() {
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight );
            } else {
                while(leftHeight > 0) {
                    pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save("report_pdf_" + new Date().getTime() + ".pdf");
            $("#pdf1").remove();
        }
    },
})

以上為筆者在項目中的部分核心代碼，如有問題，歡迎指正。

GPU云服務器云服務器 js將指定數據導出pdf pdf文件導出 js將圖片轉換為數據將公網ip轉換為eip

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93007.html

vue導出html、word和pdf

摘要：導出的頁面組件如下導出方法獲取要導出的組件頁面的把它設置成變量一文本并通過導出獲取要導出組件頁面的的標簽代碼，通過獲取，也可以通過獲得構造頁面，并使用構造一個文件流并下載，如下具體代碼如下的簡歷獲取另外一種方式迅聘選才導出導出的頁面組件如下： 1、導出html 方法：1）獲取要導出的組件頁面的css把它設置成js變量一文本并通過export導...

malakashi 2019-08-23 10:31 評論0 收藏0
前端實現html轉pdf方法總結

摘要：比上面的稍微好點，支持了一些方面的東西，具體看這個中文配置參數評價這種方法前端實現，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯的。最近要搞前端html轉pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區。經過一番調(sou)研(suo)發現html導出pdf一般有這幾種方式，各有各有優...

Heier 2019-08-02 16:04 評論0 收藏0
前端實現html轉pdf方法總結

摘要：比上面的稍微好點，支持了一些方面的東西，具體看這個中文配置參數評價這種方法前端實現，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯的。最近要搞前端html轉pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區。經過一番調(sou)研(suo)發現html導出pdf一般有這幾種方式，各有各有優...

gekylin 2019-08-29 16:40 評論0 收藏0
前端實現html轉pdf方法總結

摘要：比上面的稍微好點，支持了一些方面的東西，具體看這個中文配置參數評價這種方法前端實現，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯的。最近要搞前端html轉pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區。經過一番調(sou)研(suo)發現html導出pdf一般有這幾種方式，各有各有優...

yvonne 2019-08-23 11:51 評論0 收藏0