
在Chrome中透過「另存為PDF」列印時,如何讓頁面大小適合網頁尺寸?
我嘗試生成 PDF 的頁面上有一堆圖表,而且我不打算將其列印到紙上 - 我只想生成一個美觀的文檔。但是,當我將其列印為 PDF 時,我的圖表不斷從所有頁面中分割出來。我想簡單地將所有內容列印在一頁上。這可能嗎?
答案1
注意:此方法已半棄用
Chrome非常令人印象深刻,因為它能夠在列印部分自訂頁面尺寸。
因此,您可以自訂列印尺寸。當我必須將 32" x 80" 網頁列印為 pdf 時,這確實幫了我的忙。
以下是說明(請記住,我們正在修改頁面的前端,因此這有點技術性並且涉及一些 HTML 修改)
- Ctrl + p 開啟列印對話框
- 點擊“更多設定”以展開下部部分
右鍵單擊“紙張大小”下拉列表,然後單擊“檢查”
(注意:這將打開 chrome 的開發工具)在開發工具中,
<select class="md-select">...</select>
將會反白顯示,按一下其旁邊的箭頭以展開該部分。- 擴展後,第一個選項將是:
<option value="{"height_microns":1189000,"name":"ISO_A0","width_microns":841000,"custom_display_name":"A0"}">A0</option>
- 右鍵單擊它,然後選擇“編輯為 HTML”。將開啟一個文字編輯部分,前一個選項的文字全部突出顯示。
此時,您所需要做的就是將自訂選項插入此清單中現有選項之後。這意味著粘貼您自己的。不幸的是,我無法建立一個工具來製作程式碼片段供您貼上,因為超級用戶不允許 stacksnippets。
您只需修改幾個值。我已將下面的名稱更改為 CUSTOM。
你會注意到下面的文字中,有HHHHHHHHHH和WWWWWWWWWW。這些必須手動變更為與您所需尺寸相關的微米值。該網站提供了一個很好的免費微米計算器:https://www.calculateme.com/length/inches/to-microns/
對於我的身高來說,它是:80 英寸 = 2,032,000 微米,所以對於 HHHHHHHHHH,我將其替換為 2032000
對於我的寬度,它是 32 英寸 = 812,800 微米,因此對於 WWWWWWWWWW,我將其替換為 812800
請找到您自己的關聯值並對下面的文字執行相同的操作。
<option value="{"height_microns":HHHHHHHHHH,"name":"ISO_CUSTOM","width_microns":WWWWWWWWWW,"custom_display_name":"CUSTOM"}">CUSTOM</option>
文字準備就緒後,將其直接放在「編輯為 HTML」文字編輯器中的該部分之後。完成後,按一下文字編輯區域之外的任意位置以渲染變更。
此時,您可以點擊下拉式選單,查看“自訂”選項,然後選擇它。
我知道這聽起來很困難,但是,它確實非常簡單,如果您要根據真正自訂的內容製作 pdf,它應該可以節省您很多時間。
嚴重更新
在某些時候,Google Chrome 的列印預覽似乎更新為更加測試驅動。因此,添加自訂值違反了測試條件,並且沒有任何反應。如圖所示,這種方法不再有效。
這裡的要求是使用調試器從字面上攔截這些值,以便繞過測試斷言的阻止。抱歉,但是這太深入了,無法在這裡寫。另外,我擔心,透過發布目前的工作修復程序,它可能會因某種原因而受到保護。
親愛的谷歌,如果您確實正在查看這些帖子,也許只是允許自訂微米選項?這將不勝感激!
答案2
目前,我已經找到了一個適合我正在做的事情的 Chrome 擴充功能。它允許我拍攝整個頁面的快照,然後將其儲存為 PDF 或影像。此方法的唯一缺點是頁面(即使是 PDF)作為一個整體是一個圖像。因此,文字不可選擇或向量可縮放。
如果它對其他人有幫助的話,這是擴展: 完整網頁截圖 - FireShot
答案3
現代且唯一的解決方案:
在頁面原始碼的任意位置注入以下 CSS(或頁面本身使用的 CSS 檔案)並將尺寸更改為您喜歡的任何值。
@page {
size: 4.0in 25.5in; /* <- You can change these dimensions */
margin: 0;
}
現在嘗試「另存為 PDF」選項,您將看到頁面將採用這些尺寸。