使用 Electron 打印到 PDF

DTeam 發布于2019-08-21 16:58 / 1652人閱讀

摘要：使用打印到此系列文章的應用示例已發布于可以或下載后運行查看歡迎中的模塊具有屬性它允許您的應用程序進行打印以及打印到這個模塊有一個版本可用于這兩個進程和在瀏覽器中查看完整文檔打印到支持為了演示打印到功能上面的示例按鈕會將此頁面保存為如果

使用 Electron 打印到 PDF

此系列文章的應用示例已發布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下載后運行查看. 歡迎 Star .

Electron 中的 browser window 模塊具有 webContents 屬性, 它允許您的應用程序進行打印以及打印到PDF.

這個模塊有一個版本可用于這兩個進程: ipcMain 和 ipcRenderer.

在瀏覽器中查看完整 API 文檔.

打印到 PDF

支持: Win, macOS, Linux

為了演示打印到PDF功能, 上面的示例按鈕會將此頁面保存為PDF, 如果您有PDF查看器, 請打開文件.

在實際的應用程序中, 你更可能將它添加到應用程序菜單中, 但為了演示的目的, 我們將其設置為示例按鈕.

渲染器進程

const ipc = require("electron").ipcRenderer

const printPDFBtn = document.getElementById("print-pdf")

printPDFBtn.addEventListener("click", function (event) {
  ipc.send("print-to-pdf")
})

ipc.on("wrote-pdf", function (event, path) {
  const message = `PDF 保存到: ${path}`
  document.getElementById("pdf-path").innerHTML = message
})

主進程

const fs = require("fs")
const os = require("os")
const path = require("path")
const electron = require("electron")
const BrowserWindow = electron.BrowserWindow
const ipc = electron.ipcMain
const shell = electron.shell

ipc.on("print-to-pdf", function (event) {
  const pdfPath = path.join(os.tmpdir(), "print.pdf")
  const win = BrowserWindow.fromWebContents(event.sender)
  // 使用默認打印選項
  win.webContents.printToPDF({}, function (error, data) {
    if (error) throw error
    fs.writeFile(pdfPath, data, function (error) {
      if (error) {
        throw error
      }
      shell.openExternal("file://" + pdfPath)
      event.sender.send("wrote-pdf", pdfPath)
    })
  })
})

高級技巧

使用打印樣式表.

您可以創建打印目標的樣式表, 以優化用戶打印的外觀. 下面是在這個應用程序中使用的樣式表, 位于 assets/css/print.css 中.

@media print {
  body {
    background: none;
    color: black !important;
    font-size: 70%;
    margin: 0; padding: 0;
  }

  h1 {
    font-size: 22px;
  }

  .nav, button, .demo-box:before,
  #pdf-path, header p {
    display: none;
  }

  .demo-box, h2,
  pre, code {
    padding: 0 !important;
    margin: 0 !important;
  }

  header {
    padding: 0 0 10px 0;
  }

  code, .support {
    font-size: 10px;
  }
}

如果這邊文章對您有幫助, 感謝下方點贊或 Star GitHub: electron-api-demos-Zh_CN 支持, 謝謝.

GPU云服務器云服務器 electron使用webrtc PDF打印 asp生成pdf打印 pdf虛擬打印機win7

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

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

使用electron靜默打印

摘要：使用打印的理由很多情況下程序中使用的打印都是用戶無感知的。所以一般打印任務發出，回調函數即會調用并返回參數。選項回調函數的用法基本和相同，但是由于是提供的方法，配置項非常少，而則擴展了很多屬性。 1.使用electron打印的理由很多情況下程序中使用的打印都是用戶無感知的。并且想要靈活的控制打印內容，往往需要借助打印機給我們提供的api再進行開發，這種開發方式非常繁瑣，并且開發難度較...

Michael_Lin 2019-08-23 12:20 評論0 收藏0
Electron入門介紹

摘要：本文主要講解的入門。可以幫助我們管理包的下載依賴部署發布等。可以認為是中的。后續使用中，全部替換為即可。命令根據它，自動下載所需模塊用于創建窗口和處理系統事件安裝包的位置。 Electron是什么可以認為Electron是一種運行環境庫，我們可以基于此，用HTML、JS和CSS寫桌面應用。PC端的UI交互，主要有web應用和桌面應用。具體采用哪種方式，主要看系統的應用場景，哪個更合適...

wing324 2019-08-21 18:41 評論0 收藏0
【Electron】酷家樂客戶端開發實踐分享 — 下載管理器

摘要：作者鐘離，酷家樂客戶端負責人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后，我們積累了許多的寶貴的經驗和最佳實踐。作者：鐘離，酷家樂PC客戶端負責人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-jin-cheng-tong-xin/酷家樂客...

yuxue 2019-08-02 15:18 評論0 收藏0