python静默打印pdf_前端静默打印实现 html pdf集合

一、初步实现

前段时间，公司有个需求，要实现前端静默(点击按钮直接打印，不需要预览)，本想着直接用window.print()来实现，让用户多点击一下按钮的事儿，无奈我们的产品:

最后只好继续要网上继续的遨游找答案

二、clodop.js实现

最后发现同事之前用过 clodop.js 来实现前端打印;一顿操作猛如虎之后发现打印出来会有水印，最终也是选择放弃。

三、electron实现

偶然的机会在Electron文档中找到了

webview.print({

silent Boolean (可选) - 不询问用户打印信息，默认为 false。

})

就开始一顿操作如虎了

复制代码

目录结构

my-project

├─ .electron-vue

├── package-lock.json

├── package.json

├── src

│ ├── index.ejs

│ ├── main

│ │ ├── index.dev.js

│ │ ├── index.js

│ │ └── server.js

│ └── renderer

│ ├── App.vue

│ ├── components

│ ├── main.js

│ ├── router

│ ├── store

│ └── view

├── static

│ ├── PDFtoPrinter.exe //打印pdf插件

│ ├── config.txt

│ ├── icon.ico

│ ├── icon2.ico

│ ├── pdf

│ │ └── report.pdf //准备打印的pdf

│ └── print.html //准备打印的html

├── test

│ └── e2e

│ ├── index.js

│ ├── specs

│ └── utils.js

└── yarn.lock

复制代码

动态html 打印

Document

body,

html {

padding: 0;

margin: 0;

font-size: 30px;

}

/*打印页样式*/

@page {

margin: 0px;

}

/*自定义打印样式，可以提前放入样式，减少传入内容*/

const { ipcRenderer } = require('electron')

ipcRenderer.on('webview-print-render', (event, info) => {

// 执行渲染

document.getElementById('bd').innerHTML = info.html

ipcRenderer.sendToHost('webview-print-do')

})

复制代码

打印

id="printWebview"

ref="printWebview"

src="static/print.html"

nodeintegration

import { ipcRenderer } from 'electron'

export default {

data() {

return {

printName:''

}

mounted() {

const webview = this.$refs.printWebview

webview.addEventListener('ipc-message', event => {

if (event.channel === 'webview-print-do') {

webview.print(

{

silent: true,

printBackground: true,

deviceName: this.printName

status => {

console.log('打印发送到打印机')

}

)

}

})

this.getPrintListHandle()

methods: {

print() {

const webview = this.$refs.printWebview

webview.send('webview-print-render', {

printName: this.printName,

html: "

我是打印内容

})

//获取打印机

getPrintListHandle() {

ipcRenderer.send('getPrinterList')

ipcRenderer.once('getPrinterList', (event, data) => {

// 过滤可用打印机

this.printName = data.filter(e => e.isDefault)[0].name

})

}

#printWebview {

height: 0;

width: 0;

visibility: hidden;

}

复制代码

远程&本地pdf打印

安装依赖 npm i node-pdf-printer

复制代码//main.js 本地pdf文件打印

import NodePdfPrinter from 'node-pdf-printer'

let url1 = path.join(__static,'/pdf/test1.pdf')pipe(fs.createWriteStream(pdfPath))

let url2 = path.join(__static,'/pdf/test2.pdf')

NodePdfPrinter.printFiles([url1,url2,...],'你的打印机名字，不填/默认')

复制代码//main.js 远程pdf文件打印

import NodePdfPrinter from 'node-pdf-printer'

import request from 'request'

let url ='http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'

let pdfPath = path.join(

__static,

'pdf/' + url.slice(url.lastIndexOf('/')+1)

)

//下载远程pdf资源到/static/pdf目录

request(url, err => {

if(!err){

NodePdfPrinter.printFiles([pdfPath])

}

}).pipe(fs.createWriteStream(pdfPath))

复制代码

如果批量下载多个pdf，可以下载完所有pdf资源在执行NodePdfPrinter.printFiles进行批量打印，打印完成执行删除本地pdf。

function deleteDir(url) {

var files = []

if (fs.existsSync(url)) {

//判断给定的路径是否存在

files = fs.readdirSync(url) //返回文件和子目录的数组

files.forEach(function(file, index) {

var curPath = path.join(url, file)

if (fs.statSync(curPath).isDirectory()) {

//同步读取文件夹文件，如果是文件夹，则函数回调

deleteDir(curPath)

} else {

fs.unlinkSync(curPath) //是指定文件，则删除

}

})

// fs.rmdirSync(url) //清除文件夹

} else {

console.log('给定的路径不存在！')

}

复制代码

四、坑

打包static目录的文件没有打包进去

需要在package.json 里面添加extraResources 额外资源

"win": {

"icon": "dist/electron/static/icon2.ico",

"extraResources": [

"./static/*.html",

"./static/*.txt",

"./static/*.exe",

"./static/pdf/*.pdf"

}

复制代码

html打印偶尔遇到图片没有打印出来

原因是document.getElementById('bd').innerHTML = info.html 之后就直接向print.vue通知打印，导致webview没有完全加载完成

作者找了好久，没有找到合适的监听，目前是在重定向资源的时候做短暂的延时，有知道的小伙伴谢谢分享

python静默打印pdf_前端静默打印实现 html pdf集合相关推荐

物联网python开发实战pdf_智能物联网项目开发实战 PDF 下载
资料目录: 第1章让物联网项目变得智能 1 统计学和数据科学简介 1 用于统计计算和数据科学的Python 3 用于统计计算和数据科学的Python库 5 编写一个用于统计的简单程序 6 物联网设备 ...
python静默打印pdf_使用electron静默打印
1.使用electron打印的理由很多情况下程序中使用的打印都是用户无感知的.并且想要灵活的控制打印内容,往往需要借助打印机给我们提供的api再进行开发,这种开发方式非常繁琐,并且开发难度较大. e ...
html5静默打印_electron实现静默打印
2020-09-02更新版本比较低,请谨慎使用,我对electron研究比较少,小伙伴们可以加我微信,我有个专门的electron群前言 electron+vuecli3 实现设置打印机,静默打印 ...
基于WEB的Office文档打印——浏览器中静默打印Word文档
web应用开发中,如何集成Office文档打印功能,并不是一个容易实线的问题.现在有了打天下web打印插件,仅以几行JS代码就可以让你将Office打印功能集成到你的Web项目中. 引入PrintWo ...
html图片打印不出来 lodop_前端实现打印图像功能
前提:后台返回是绘制医用心电波形报告的数据,前端通过canvas在网页上绘制再进行打印并生成PDF文档! 一. 尝试LODOP打印插件之前前端表单打印功能有使用过LODOP打印插件,需安装相应的L ...
window.print()前端实现打印功能
方法介绍 window.print()方法用于打印当前窗口的内容. 默认打印页面中body里的所有内容. 调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印配置. 1. 打印方法 1 ...
python代码实现二叉树的分层打印
python代码实现二叉树的分层打印 #python代码实现二叉树的分层打印 class Node():def __init__(self, val=None):self.val = valself. ...
python将dict中的unicode打印成中文
python将dict中的unicode打印成中文 import json a = {u'content': {u'address_detail': {u'province': u'\u5409\u6 ...
Python:通过执行100万次打印来比较C和python的性能，以及用C和python结合来解决性能问题的方法 .
Python:通过执行100万次打印来比较C和python的性能,以及用C和python结合来解决性能问题的方法 . 参考文章: (1)Python:通过执行100万次打印来比较C和python的性能 ...

python静默打印pdf_前端静默打印实现 html pdf集合

python静默打印pdf_前端静默打印实现 html pdf集合相关推荐

最新文章

热门文章