如何打印使用 jquery 動態生成的 HTML 頁面

Question

我有一個使用表和 jquery 構建的動態生成的文檔。 數據來自一個 json 文件，它可以在任何地方塑造高度、圖片顏色等。我不會發布整個代碼，因為它很大，但這里有一張圖片：

每當我嘗試打印時，輸出是這樣的：

如您所見，畫布很好，但沒有顯示圖像及其背景顏色等元素。 左邊的標尺也是一個背景重復圖像，它也沒有顯示出來。 （底部很好，我只是沒有在圖片中包含它）

這是我在 json 數據之前的文檔：

為什么瀏覽器不能正確打印屏幕上的內容？ 我試過媒體打印，但它也不起作用。

Answer 1

首先，正如@rob-moll 和@rory-mccrossan 所建議的那樣，確保您的“打印”屏幕預覽允許顯示圖像。 在 Chromium 上，此選項可在“更多設置”下的打印屏幕 (Ctrl+P) 上找到，稱為“背景圖形”。

在 Firefox 上，可以在標題為“格式和選項”的選項卡中的“頁面設置...”下找到此設置，在那里您會找到一個名為“選項”的部分，其中包含一個復選框以啟用“打印背景（顏色和圖像）” ）。

然后，確保在以下行中的任何地方都沒有（隱藏的）CSS 語句：

@media print {
  * {background:none}
}

或者任何會影響您嘗試打印的元素的東西。