成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

將HTML頁面轉(zhuǎn)換為PDF文件并導出

Airy / 2037人閱讀

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

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

1.需要引入的文件

html2canvas.js（根據(jù)實際情況選擇相應(yīng)的版本）
jspdf.min.js（根據(jù)實際情況選擇相應(yīng)的版本）

2.實現(xiàn)思路

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

3.實現(xiàn)代碼

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


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

 

(2)JS代碼

/*復(fù)制元素，注意ID*/
$("body").append("
…………………………………………………………
");
/*設(shè)置新元素樣式*/
 $("#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();
        }
    },
})

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/93007.html

相關(guān)文章

  • vue導出html、word和pdf

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

    malakashi 評論0 收藏0

  • 前端實現(xiàn)html轉(zhuǎn)pdf方法總結(jié)

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

    Heier 評論0 收藏0

  • 前端實現(xiàn)html轉(zhuǎn)pdf方法總結(jié)

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

    gekylin 評論0 收藏0

  • 前端實現(xiàn)html轉(zhuǎn)pdf方法總結(jié)

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

    yvonne 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<