成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

Airy / 1999人閱讀

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

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

1.需要引入的文件

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

2.實(shí)現(xiàn)思路

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

3.實(shí)現(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();
        }
    },
})

以上為筆者在項(xiàng)目中的部分核心代碼，如有問(wèn)題，歡迎指正。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93007.html

相關(guān)文章

  • vue導(dǎo)出html、word和pdf

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

    malakashi 評(píng)論0 收藏0

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

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

    Heier 評(píng)論0 收藏0

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

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

    gekylin 評(píng)論0 收藏0

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

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

    yvonne 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<