资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用 Electron 打印到 PDF

使用 Electron 打印到 PDF

DTeam / 1731人阅读

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

使用 Electron 打印到 PDF 
</>复制代码 
  1. 此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下载后运行查看. 欢迎 Star .

Electron 中的 browser window 模块具有 webContents 属性, 它允许您的应用程序进行打印以及打印到PDF.

这个模块有一个版本可用于这两个进程: ipcMain 和 ipcRenderer.

在浏览器中查看 完整 API 文档.

打印到 PDF 
</>复制代码 
  1. 支持: Win, macOS, Linux

为了演示打印到PDF功能, 上面的示例按钮会将此页面保存为PDF, 如果您有PDF查看器, 请打开文件.

在实际的应用程序中, 你更可能将它添加到应用程序菜单中, 但为了演示的目的, 我们将其设置为示例按钮.

渲染器进程

</>复制代码 
  1. const ipc = require("electron").ipcRenderer
  2. const printPDFBtn = document.getElementById("print-pdf")
  3. printPDFBtn.addEventListener("click", function (event) {
  4.   ipc.send("print-to-pdf")
  5. })
  6. ipc.on("wrote-pdf", function (event, path) {
  7.   const message = `PDF 保存到: ${path}`
  8.   document.getElementById("pdf-path").innerHTML = message
  9. })

主进程

</>复制代码 
  1. const fs = require("fs")
  2. const os = require("os")
  3. const path = require("path")
  4. const electron = require("electron")
  5. const BrowserWindow = electron.BrowserWindow
  6. const ipc = electron.ipcMain
  7. const shell = electron.shell
  8. ipc.on("print-to-pdf", function (event) {
  9.   const pdfPath = path.join(os.tmpdir(), "print.pdf")
  10.   const win = BrowserWindow.fromWebContents(event.sender)
  11.   // 使用默认打印选项
  12.   win.webContents.printToPDF({}, function (error, data) {
  13.     if (error) throw error
  14.     fs.writeFile(pdfPath, data, function (error) {
  15.       if (error) {
  16.         throw error
  17.       }
  18.       shell.openExternal("file://" + pdfPath)
  19.       event.sender.send("wrote-pdf", pdfPath)
  20.     })
  21.   })
  22. })
高级技巧

使用打印样式表.

您可以创建打印目标的样式表, 以优化用户打印的外观. 下面是在这个应用程序中使用的样式表, 位于 assets/css/print.css 中.

</>复制代码 
  1. @media print {
  2.   body {
  3.     background: none;
  4.     color: black !important;
  5.     font-size: 70%;
  6.     margin: 0; padding: 0;
  7.   }
  8.   h1 {
  9.     font-size: 22px;
  10.   }
  11.   .nav, button, .demo-box:before,
  12.   #pdf-path, header p {
  13.     display: none;
  14.   }
  15.   .demo-box, h2,
  16.   pre, code {
  17.     padding: 0 !important;
  18.     margin: 0 !important;
  19.   }
  20.   header {
  21.     padding: 0 0 10px 0;
  22.   }
  23.   code, .support {
  24.     font-size: 10px;
  25.   }
  26. }
</>复制代码 
  1. 如果这边文章对您有帮助, 感谢 下方点赞 或 Star  GitHub: electron-api-demos-Zh_CN 支持, 谢谢.
GPU云服务器 云服务器 electron使用webrtc PDF打印 asp生成pdf打印 pdf虚拟打印机win7

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

转载请注明本文地址：https://www.ucloud.cn/yun/88968.html

相关文章

  • 使用electron静默打印

    摘要：使用打印的理由很多情况下程序中使用的打印都是用户无感知的。所以一般打印任务发出，回调函数即会调用并返回参数。选项回调函数的用法基本和相同，但是由于是提供的方法，配置项非常少，而则扩展了很多属性。 1.使用electron打印的理由 很多情况下程序中使用的打印都是用户无感知的。并且想要灵活的控制打印内容，往往需要借助打印机给我们提供的api再进行开发，这种开发方式非常繁琐，并且开发难度较...

    Michael_Lin 评论0 收藏0

  • Electron入门介绍

    摘要：本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中，全部替换为即可。命令根据它，自动下载所需模块用于创建窗口和处理系统事件安装包的位置。 Electron是什么 可以认为Electron是一种运行环境库，我们可以基于此，用HTML、JS和CSS写桌面应用。PC端的UI交互，主要有web应用和桌面应用。具体采用哪种方式，主要看系统的应用场景，哪个更合适...

    wing324 评论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 评论0 收藏0

发表评论

登陆后可评论

0条评论

DTeam

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<