国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端實現html轉pdf方法總結

yvonne / 3565人閱讀

摘要：比上面的稍微好點，支持了一些方面的東西，具體看這個中文配置參數評價這種方法前端實現，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯的。

最近要搞前端html轉pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區。
經過一番調(sou)研(suo)發現html導出pdf一般有這幾種方式，各有各有優缺，下面簡單介紹。

這篇文章說了啥

前端實現(著重)

通過打印預覽實現

通過插件jsPdf實現

后端實現(湊數)

iText、wkhtmltopdf、prince

正文 通過打印預覽實現 介紹

通過打印預覽來實現導出pdf并不是什么稀奇事，一般瀏覽器(Chrome)在頁面手動Ctrl + P都能將當前頁進行打印預覽。在打印預覽的時候我們更改打印方式，選擇將頁面保存為PDF即可實現頁面保存為PDF的功能。
比如此時我進行Ctrl + P就可以看到這個功能。

程序中實現這個則要靠下面這個方法來實現：

window.print(); // 在控制臺執行print()也能看到上面打印預覽的效果

當然能導出PDF只是主要需求，我們還有一些其他的需求

只想將頁面的一部分導出為PDF

我們想導出的PDF是A4紙大小

我們想導出的PDF是豎著的

我們還想調整導出PDF的樣式

...

這些需求通過在對css中媒體查詢的定義就可以實現

@media print {
    @page {
        size: A4 portrait; // A4大小 縱向
    }
    
    .other-ele {
        // 打印時將不需要的元素隱藏
        display: none;
    }
    
    .pdf-title {
        // 只在打印時候顯示的元素
        display: block;
    }
    
    .panel-sm {
        // 打印時候改變某些元素的樣式
        margin: 0;
        border: 1px solid #bce8f1;
    }
}

更多的設置可以參考：CSS 打印

最佳實踐

需要提醒的是：如果要改變原有樣式，最好是在元素上新加一個class或者id來寫，而不是在原有class上寫。比如有這樣一個元素

我是PDF標題

打印時候要把這個字體大小設置成18px的話，我們不能這么寫

@media print{
   .title { // not work
       font-size: 18px;
   }
}

這樣寫試不起作用的。想要生效得在元素上新加一個class類寫

我是PDF標題
@media print{
   .title-print {
       font-size: 18px;
   }
}

經過實踐，這樣寫才可以生效。

庫或者插件

有人可能覺得這樣寫略有麻煩，別擔心，總有人會讓麻煩的事情變得簡單，這個人如果不是你，那就一定是他。
基于window.print()有人封裝了一些插件：

PrintArea可以簡單的實現部分區域打印，他的原理是通過把要打印的部分放入一個新的iframe然后觸發這個iframe的print。這個插件不太穩定，會出現空白，請酌情使用。

jQuery.print比上面的稍微好點，支持了一些css方面的東西，具體看這個jQuery.print中文配置參數

評價

這種方法前端實現，靈活簡單，而且在頁面還原上是很好的，生成pdf的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯的。但是因為瀏覽器對print方法的支持不一(具體支持情況戳這里)，所以目前也就只能在Chrome上用用。另外，這個方法還需要用戶點一下保存按鈕，用戶體驗上也不太好。

通過jsPdf實現 介紹

jsPdf是一個可以把html轉成pdf的插件，有人多人在用。但是吧，老外做的很多東西沒考慮過英文之外的語言(這個可以理解，我要做個啥肯定也是做成中文的，我才不考慮啥日語英語阿拉伯語呢)，這個東西也不例外的不支持中文，那咋辦呢，很多兄弟想了辦法：

曲線救國 | html2canvas + jsPdf

既然你不支持中文，勞資也懶得跟你廢話，勞資我把頁面轉成圖片，怕不怕，圖片再導出PDF照樣中！這種方式很常見、很省事，問題也很多圖片拉伸、模糊，最重要這樣導出的PDF是沒有靈魂的，因為他里面的內容都是圖片，不能復制。因為沒有靈魂，所以我沒有采用這種方法，如果你喜歡這種可以參照這篇文章Javascript 將html轉成pdf,下載,支持多頁哦（html2canvas 和 jsPDF），寫的很詳細。

硬生生支持 | jsPDF-CustomFonts-support

既然你不支持其他語言是吧，那我寫個插件出來搞到你支持為止。干這活兒的是一個來自韓國的哥們兒，他寫一個可以支持其他語言的插件jsPDF-CustomFonts-support。原理大概就是利用把你提供的字體文件轉成base64格式，然后做成一個js文件，拿這個js文件當做字庫。恩，我喜歡這種強上的做法。而且這樣導出的pdf內容是可以復制的，簡直驚喜。于是，我采用了這樣的方式。
我當時是順著這哥們兒的道往前走的jsPDF生成pdf文件和中文編碼，這個過程是非常曲折與動人的，具體不表，只講里面遇到的問題。

最佳實踐

掛幾個里面遇到的比較坑的錯誤

jsPdf官網的api文檔打不開

雖然文檔頁面打不開，但是在他的github倉庫里是有docs這個目錄的，而且目錄下也有文檔，那我們就把這個倉庫下載來，在本地打開docs/index.html來查看文檔，效果是一樣的。

jsPDF-AutoTabledemo的表格做的很好看，但是他沒有提供代碼，那我怎么看到他是怎么實現的？

demo的實現都在這個examples.js中，沒有混淆，沒有壓縮，可以依葫蘆畫瓢仿一個demo的表格。

如何生成自己的字體文件

jsPDF-CustomFonts-support默認提供了一個字體文件，但是里面有很多漢字不能正常顯示，所以你需要自己生成一個字體文件。怎么生生成呢?你需要這樣：

git clone https://github.com/sphilee/jsPDF-CustomFonts-support
cd jsPDF-CustomFonts-support
npm install
mv fontFilePath/fontName.ttf ./jsPDF-CustomFonts-support/fonts/ # 把你準備的`.ttf`格式字體，放入`jsPDF-CustomFonts-support/fonts/`目錄下
node makeFonts.js

然后jsPDF-CustomFonts-support/dist/default_vfs.js就是你要的字體文件。

Uncaught TypeError: jsPDFAPI.addFileToVFS is not a function

這個錯誤是jsPDF-CustomFonts-support中報出的，是因為在1.4.0以下版本的時候jsPDF還不支持addFileToVFS這個方法，所以最好的方法是使用最新的jspdf版本
用下面這個版本的jspdf替換掉報錯的。

Cannot read property "widths" of undefined

這個錯誤是在jsPDF-AutoTable中報出的，是因為同時引入jspdf.customfonts.min.js和jspdf.customfonts.debug.js這兩個文件導致的，只引用其中一個就好了。

jsPDF-AutoTablethead中的中文顯示亂碼

這個問題我找不到原因，但是我找到了一個方法: 隱藏掉thead，通過在tbody中將第一排tr設置樣式來模擬thead。實現如下：

   doc.autoTable(columns, data, {showHeader: "never"}); // 不顯示thead
評價

html2canvas + jsPdf的方法直接圖轉pdf，簡單，但是質量差點。
jsPDF-CustomFonts-support的方法雖然質量上占優勢，但那個字體文件動輒好幾兆，甚至十幾兆，這對于前端來說是一個不小的開銷，對性能影響太。
此外，這兩種方式導出PDF都是點一下導出就會下載文件的，不需要用戶再次確認下載，這點用戶體驗還是比較好的。

后端導出pdf

iText、wkhtmltopdf、prince這三個都是后端生成pdf的工具。這三個都沒有node api。故不多說。想看具體的比較可以參考這篇文章html頁面導出為pdf（jsPDF、iText、wkhtmltopdf）。

參考

https://segmentfault.com/a/11...
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...
https://blog.csdn.net/JodenHe...
https://blog.csdn.net/huyuyan...

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

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

相關文章

  • 前端實現html轉pdf方法總結

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

    Heier 評論0 收藏0

  • 前端實現html轉pdf方法總結

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

    gekylin 評論0 收藏0

  • API

    摘要：是一個極度純凈的上傳插件，通過簡單調整就可以融入到任何項目，支持多文件上傳上傳速率動態控制真實進度監控分塊生成分塊上傳校驗秒傳暫停取消等。 跨域學習筆記 前言: 當一個資源，向與之所在服務器不同的域或端口請求另一個資源時，這個HTTP請求，我們認為是跨域的請求。出于安全考慮，瀏覽器會限制腳本發起的跨域HTTP請求。 那天后端讓我把token放到http請求頭字段里，說是為了和RN端統一...

    lsxiao 評論0 收藏0

  • 使用JavaScript將當前頁面保存成PDF，支持圖片和文字的保存

    摘要：前端開發的朋友們可能會遇到這個需求將您負責開發的網頁的全部內容，包括文字和圖片，一起保存成一個文件。在您的前端頁面里畫一個按鈕，用于觸發將當前網頁保存成文件的事件。 前端開發的朋友們可能會遇到這個需求：將您負責開發的網頁的全部內容，包括文字和圖片，一起保存成一個PDF文件。如果采用屏幕截圖的話，默認Windows操作系統的截圖按鈕無法完整截取超過一屏幕的屏幕內容。 我在網上找了一段時間...

    animabear 評論0 收藏0

  • jspdf + html2canvas 實現html轉pdf (提高分辨率版本)

    摘要：用這個方法生成的有個問題還挺大的，就是生成的文件尤其是增大了分辨率以后都是大幾百的，稍微有點內容的基本就將近了。暫時還未找到解決的方式。 剛解決了html中某div塊生成pdf的問題，熱乎乎的，趕緊記錄下 引入的js傳送門： https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js https://cdn.b...

    aisuhua 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<