使用 Electron 打印到 PDF

DTeam 发布于2019-08-21 16:58 / 1320人阅读

摘要：使用打印到此系列文章的应用示例已发布于可以或下载后运行查看欢迎中的模块具有属性它允许您的应用程序进行打印以及打印到这个模块有一个版本可用于这两个进程和在浏览器中查看完整文档打印到支持为了演示打印到功能上面的示例按钮会将此页面保存为如果

使用 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 支持, 谢谢.

云服务器混合云 electron使用webrtc PDF打印 asp生成pdf打印 pdf虚拟打印机win7

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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