iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 29
2
Modern Web

前端UI軍火庫系列 第 29

[Day 29]jsPDF - 前端直接產生PDF也沒問題!

  • 分享至 

  • xImage
  •  

昨天我們介紹了PDF.js這套用來讓前端可以直接瀏覽PDF檔的library,今天我們來介紹一款可以在前端直接產生PDF檔的神奇程式-jsPDF

開始使用jsPDF

要使用jsPDF非常容易,載入js程式後,我們先簡單加入以下程式碼

  var doc = new jsPDF();

  doc.text('Hello world!', 10, 10);
  doc.save('helloworld.pdf');

就能夠立刻產生一個PDF檔啦!打開看看,就能夠看到我們剛剛使用doc.text()產生的Hello world的文字,這個PDF檔是透過doc.save()產生的。是不是超簡單的阿!

如果需要產生不同的內容如矩形方塊、圓形或設定顏色等等,可以參考官方的文件:http://rawgit.com/MrRio/jsPDF/master/docs/index.html

將HTML轉成PDF

jsPDF也可以html2pdf外掛,輕易的將畫面上的HTML轉成PDF(範例),不過目前jsPDF並沒有支援Unicode,也就是說如果是中文的話可能會無法使用,目前能做到的只有透過html2canvas將HTML轉成canvas後,再將canvas轉為圖片,最後在加到jsPDF中。

  var doc = new jsPDF();
  html2canvas(document.body, {
    onrendered: function(canvas) {
      var image = canvas.toDataURL("image/png");
      doc.addImage(image, 'JPEG', 0, 0, canvas.width, canvas.height);
      doc.save('test.pdf');
    }
  });

程式碼DEMO:https://jsfiddle.net/wellwind/wpxnhpfs/

雖然目前jsPDF還不支援Unicode,但先學起來,說不定哪天就可以用到囉!

文章同步法表於: https://dotblogs.com.tw/wellwind/2016/12/29/front-end-jspdf

不正經閒聊

只剩下一天,終點衝刺啦!!


上一篇
[Day 28]PDF.js - 前端也能輕鬆顯示PDF
下一篇
[Day 30]Chart.js - 輕鬆完成資料視覺化
系列文
前端UI軍火庫31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
豬豬人
iT邦新手 4 級 ‧ 2019-08-14 10:45:37

想請問中文字體如何不便亂碼?
試了很多網路上的資料都不成功

0
jbuduoo
iT邦新手 4 級 ‧ 2022-06-06 17:34:33

「將canvas轉為圖片,最後在加到jsPDF中」

var image = $(pdfCanvas)[0].toDataURL("image/png");
pdf.addImage(image, 'PNG', 0,0);	

這行幫了我,不然每次顯示出來的都是黑底。

我要留言

立即登入留言