台灣最大程式設計社群網站
線上人數
616
 
會員總數:244895
討論主題:188889
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> html轉PDF或Image的方法?
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
html轉PDF或Image的方法?
價值 : 100 QP  點閱數:1344 回應數:5

樓主

Max
門外漢
0 38
629 26
發送站內信

目的是要讓user直接將網頁下載存成PDF檔 或是 圖片檔

但試過幾個html to PDF plugin,效果都不理想

不是吃不到CSS屬性讓排版變很差的,要不然就是程式要一行一行刻成PDF格式

要不然就只有套用在table element


也找過html to image,效果也不理想

我的網頁是長版的,轉成圖片後,圖片要一直放大再放大,才可以到可看的程度


也試過window.print(),直接開啟browser預覽列印模式
雖然不錯,可是有沒有方法,當開啟預覽列印模式後
選項直接預設 "存成PDF" 並把頁首頁尾取消勾選呢?


總結想問的
1. html to pdf 有推薦簡單好用 且有支援CSS,直接將html 轉成 pdf的plugin嗎?

2. html to image,我是用html2canvas,有方法將image預設就是zoom in幾倍嗎? 還是有參數可調整讓圖片更容易看?

3. window.print()預覽模式開啟後,有方法可直接將印表機選項改成"存成PDF" 以及頁首頁尾選項取消嗎

搜尋相關Tags的文章: [ html ] , [ pdf ] , [ image ] , [ print ] , [ preview ] ,
本篇文章發表於2016-08-30 16:20
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
目前沒有可以完全配合css轉換成pdf的。
我自已也是用php的tcpdf處理。我了解它並非是所有的參數可以運行。
如寬高度就不能用百分比了。
大多數而言,當按下列印時。我會額外用@medio的方式,切換成print模式跑css化。
再用js去做微調定位的方式另開頁面產生pdf的處理模式。

雖無法盡善盡美。但還是可以得到不錯的效果。

第二種方式其實因該是對你最理想的方式。不過你說到那是用html2canvas
那可以自由放大縮小啊??
因為那實體就是運用Html5 Canvas來處理的。你只要去了解html的canvars原理就可以做微調處理了。

第三種是無解。因為那個是受限在客戶端那邊的。
本篇文章回覆於2016-08-31 10:59
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

Max
檢舉此回應
to 星空,

剛有試了一下,canvas似乎沒辦法支援zoom的特性
圖片下載後,開啟一樣是最遠預覽畫面

但寬高確實是有的,可是這樣代表下載後的圖部分會被截掉

是否有別的方法可實現呢?
本篇文章回覆於2016-08-31 14:34
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
我是不太明白你想要實現的方式是為何。

但一般我將其canvas畫布處理完成後。會包一個div處理。
在將其調整放大成我要的格式。

說穿了。產生圖的部份我們是不能去處理他的。除非你重新改寫html2canvas
不過我想~~~一堆css的應用來講。如果不先先載入處理的話。畫面也是取不出來的。

所以全取畫面這個動作是無法避免的。

但山不轉路轉,當畫面全取出來後,它就是一個圖片元件。這時可以將其導入產生到顯示去另一個div上。
再將其建立成img格式來轉換處理。

不過一般來說,我會將其圖片資料來源轉傳進去到server內暫存(利用base64的特性)產生一個暫存檔。
之後在轉取這個暫存檔的圖片來呈現畫面。


其實你也因該知道~~~所謂的canvas也是一種img的特性。
差別就是它是直接圖片資料來源,比較不太能使用img的方式做css處理。
但有時山不轉路轉。將資料來源全新導入到一個後端的程式碼讓他變成一個圖片格式。也是一種方式。
再來就是利用原本css的特性處理就好了。
本篇文章回覆於2016-08-31 15:15
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

Max
檢舉此回應
to 星空,

我做了一個利用html2canvas,將html轉png的一段程式,如下
http://jsfiddle.net/5ud8jkvf/6109/

當按下download存成圖片後,再開啟圖檔瀏覽的效果,字體太小
必須一直放大

我試過改變html-content-holder div的寬度或是加入zoom屬性
但都只是顯示的寬度改變
zoom的話是沒辦法套用
本篇文章回覆於2016-08-31 16:07
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
最有價值解答

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
我上面已經有說過。一開始一定得要先建立好全區的圖片。畢竟這是利用html所有的碼處理的。
等全建立好之後。再來做圖片的截取處理。

也就是說你得分兩步來處理。
一開始儲存的檔案就會如你所說的。會因為高度問題,但又要縮在整個頁面的情況下。
就會自然的寬度縮小。而造成字體變小。

所以你得捨棄一些高度上的內容來顯示。
這可以利用css的背景處理來達到。

如果只是想要直接建立圖片的話。那你就得利用某些可截圖的方式。(如php可以利用gd庫處理)

如果沒後端程式來幫你的話。那你就只能利用css來幫你處理了。給你對應的css處理

本篇文章回覆於2016-09-01 10:15
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.