vue 使用 PrintJs 实现打印pdf效果

一、print.js介绍

Print.js主要是为了帮助我们直接在应用程序中打印PDF文件,而无需离开界面,并且不使用嵌入。对于用户不需要打开或下载PDF文件的特殊情况,他们只需要打印它们。

例如,当用户请求打印在服务器端生成的报告时,这种方法就很有用。这些报告将以PDF文件的形式发回。在打印这些文件之前不需要打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速方法

PDF文件必须从托管您的应用的同一域提供。Print.js使用iframe在打印之前加载文件,因此,它受到同源策略的限制。这有助于防止跨站脚本(XSS)攻击。

官网地址

二、下载安装

1.您可以从GitHub版本下载最新版本的Print.js
点击去下载

2.使用npm安装

  npm install print-js --save

3.使用yarn安装

 yarn add print-js

4.通过npm或yarn安装时,将库导入到项目中⭐

 import print from 'print-js'

三、引入

1.首先,我们需要在页面上包含Print.js库。

 <script src="print.js"></script>

如果您将使用模态特性,还需要在页面上包含Print.css。

 <link rel="stylesheet" type="text/css" href="print.css">

就这样。现在你可以在你的页面中使用Print.js了。
在编写JavaScript代码时,请记住库占用了一个printJS全局变量

四、使用

有四种打印文档类型可用:‘pdf’,‘html’,‘image’和’json’。

默认类型为“pdf”。

1.它的基本用法是调用printJS()并传入一个PDF文档url:printJS(‘docs/PrintJS.pdf’)。

//添加一个按钮来打印位于您的托管服务器上的PDF文件<button type="button" onclick="printJS('docs/printjs.pdf')">Print PDF</button>//对于大文件,可以在加载文件时向用户显示消息。
<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">Print PDF with Message</button>//该库支持base64 PDF打印:<button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">Print PDF with Message</button>

2.对于图像文件,想法是相同的,但需要传递第二个参数:printJS(‘images/PrintJS.jpg’,’ image ')

//在您的页面上加载图像,只需在屏幕上显示所需的分辨率
<img src="images/print-01.jpg" />//在JavaScript中,将最高分辨率的图像url传递给Print.js以获得更好的打印质量:
printJS('images/print-01-highres.jpg', 'image')
//Print.js使用promise来确保在尝试打印之前加载图像。这在打印尚未加载的高分辨率图像时很有用,如上面的示例。//您还可以向正在打印的图像添加页眉printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})//要同时打印多个图像,我们可以传递一个图像数组。我们还可以传递要应用于每个图像的样式printJS({printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],type: 'image',header: 'Multiple Images',imageStyle: 'width:50%;margin-bottom:20px;'})

3.要打印HTML元素,以类似的方式,传入元素id并输入:printJS(‘myElementId’,‘html’)。

//将打印按钮添加到HTML表单<form method="post" action="#" id="printJS-form">...</form><button type="button" onclick="printJS('printJS-form', 'html')">Print Form</button>//Print.js接受带参数的对象。让我们再次打印表单,但现在我们将向页面添加一个标题(页眉)<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">Print Form with Header</button>

4.打印JSON数据时,传入数据、类型和要打印的数据属性:
printJS({printable:myData,type:‘json’,properties:jp ‘prop1’,‘prop2’,‘prop3’]});

 someJSONdata = [{name: 'John Doe',email: 'john@doe.com',phone: '111-111-1111'},{name: 'Barry Allen',email: 'barry@flash.com',phone: '222-222-2222'},{name: 'Cool Dude',email: 'cool@dude.com',phone: '333-333-3333'}]<button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">Print JSON Data</button>//我们可以通过传递一些自定义css来样式化数据网格
<button type="button" onclick="printJS({printable: someJSONdata,properties: ['name', 'email', 'phone'],type: 'json',gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;',gridStyle: 'border: 2px solid #3971A5;'})">Print JSON Data</button>//我们可以自定义表头文本发送一个对象数组
<button type="button" onclick="printJS({printable: someJSONdata,properties: [{ field: 'name', displayName: 'Full Name'},{ field: 'email', displayName: 'E-mail'},{ field: 'phone', displayName: 'Phone'}],type: 'json'})">Print with custom table header text</button>//JSON、HTML和Image print可以接收原始HTML头
<button type="button" onclick="printJS({printable: someJSONdata,type: 'json',properties: ['name', 'email', 'phone'],header: '<h3 class="custom-h3">My custom header</h3>',style: '.custom-h3 { color: red; }'})">Print header raw html
</button>

参数配置 ⭐
在这里插入图片描述
浏览器兼容
目前,并非所有库功能都能在浏览器之间工作。下面是使用这些主要浏览器进行的测试结果,使用它们的最新版本
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/732036.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IRLINK(红外遥控器)

工具 1.Proteus 8 仿真器 2.keil 5 编辑器 原理图 讲解 简介 红外遥控&#xff1a;是利用红外线进行通信的设备&#xff0c;由红外LED调制后的信号发出&#xff0c;由专用的红外接头进行解调&#xff1b; 通信方式&#xff1a;单工、异步&#xff1b; 红外LED波长&#x…

【微信小程序】传参存储

目录 一、本地数据存储 wx.setStorage wx.setStorageSync 1.1、异步缓存 存取数据 1.2、同步缓存 存取数据 二、使用url跳转路径携带参数 2.1、 wx.redirectTo({}) 2.2、 wx.navigateTo({}) 2.3、 wx.switchTab({}) 2.4 、wx.reLaunch({}) 2.5、组件跳转 三、…

docker拉取镜像失败的解决方案大全

更换国内源 创建或修改 /etc/docker/daemon.json 文件&#xff0c;修改&#xff1a; {"registry-mirrors" : ["https://registry.docker-cn.com","http://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn","https:…

Web APIs 5 Window对象、本地存储

Web APIs 5 一、Window对象1、BOM2、定时器-延时函数3、JS执行机制4、location对象案例&#xff1a;5秒钟之后跳转的页面 5、navigator对象6、histroy对象 二、本地存储本地存储 localStorage本地存储 sessionStorage存储复杂数据类型案例&#xff1a;学生就业统计表字符串拼接…

html css 导航栏 2

鼠标划过会向上移动改变颜色 html文件 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>导航栏</title><link rel"stylesheet" href"css/dhl1.css" /></head><body><div …

动态规划(带你了解 原理 实践)

目录 引言 一、动态规划的基本概念 二、动态规划的应用 1. 背包问题 2. 最短路径问题 3. 0-1背包问题的变种 4. 字符串匹配与编辑距离 5. 金融投资组合优化 6. 生产调度问题 7. 项目管理中的资源分配 三、动态规划算法的优缺点 优点 1 效率高 2 通用性强 缺点&a…

Java高频面试之消息队列与分布式篇

有需要互关的小伙伴,关注一下,有关必回关,争取今年认证早日拿到博客专家 消息队列的基本作用&#xff1f; 异步通信&#xff1a;消息队列提供了异步通信的能力&#xff0c;发送方可以将消息发送到队列中&#xff0c;而无需等待接收方立即处理。发送方和接收方可以解耦&#x…

排序——希尔排序、插入排序

本节复习排序中的希尔排序&#xff0c;希尔排序属于插入排序。 希尔排序的代码和插入排序非常类似。 思想却相对于插入排序来说复杂。 在复习希尔排序之前&#xff0c; 我们需要先复习一下插入排序。 目录 插入排序 插入过程 代码实现 希尔排序 希尔排序的思想 代码实…

蓝桥杯之【01背包模版】牛客例题展示

牛客链接 #include <bits/stdc.h> using namespace std; int n,V; const int N1010; int v[N],w[N]; int dp[N][N]; int main() {cin>>n>>V;for(int i1;i<n;i){cin>>v[i]>>w[i];}for(int i1;i<n;i){for(int j1;j<V;j){dp[i][j]dp[i-1][…

Svg Flow Editor 原生svg流程图编辑器(一)

系列文章 Svg Flow Editor 原生svg流程图编辑器&#xff08;二&#xff09; 效果展示 项目概述 svg flow editor 是一款流程图编辑器&#xff0c;提供了一系列流程图交互、编辑所必需的功能&#xff0c;支持前端研发自定义开发各种逻辑编排场景&#xff0c;如流程图、ER 图、…

【xv6操作系统】Lab systems calls

一、实验前须知 阅读 xv6 文档的第 2 章和第 4 章的 4.3 节和 4.4 节以及相关源文件&#xff1a; 系统调用的用户空间代码在 user/user.h 和 user/usys.pl 中。 内核空间代码在 kernel/syscall.h 和 kernel/syscall.c 中。 与进程相关的代码在 kernel/proc.h 和 kernel/proc.c…

CorelDRAW Standard2024适合业余爱好者和家庭企业的图形设计软件

CorelDRAW Standard 2024是一款功能强大的矢量图形设计软件&#xff0c;专为图形爱好者、家庭用户、微型企业和学生们设计。该软件在Windows平台上运行&#xff0c;并提供了智能对象、布局、插图和模板等功能&#xff0c;帮助用户快速创建高质量的设计作品。 CorelDRAW Standa…

图机器学习(4)-面向连接层面的人工特征工程

0 问题定义 通过已经连接去猜未知连接&#xff1a; 有两个思路&#xff1a; &#xff08;1&#xff09;直接提取link的特征&#xff0c;把link变成D维向量&#xff1b; &#xff08;2&#xff09;把link两端节点的D维向量拼在一起&#xff0c;缺点&#xff1a;丢失了link本身…

【C++】手撕string类(超实用!)

前言 一、标准库中的string类 1.1 string类介绍 1.2 string的常用接口 1.2.1 常用的构造函数 1.2.2 容量操作接口 &#xff08;1&#xff09;size &#xff08;2&#xff09;capacity &#xff08;3&#xff09;empty &#xff08;4&#xff09;clear &#xff08…

MySQL 学习笔记(基础篇 Day3)

「写在前面」 本文为黑马程序员 MySQL 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. MySQL 学习笔记&#xff08;基础篇 Day1&#xff09; 2. MySQL 学习笔记&#xff08…

移掉 K 位数字(LeetCode 402)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路4.1 暴力法4.2 贪心 单调栈 参考文献 1.问题描述 给你一个以字符串表示的非负整数 num 和一个整数 k&#xff0c;移除这个数中的 k 位数字&#xff0c;使得剩下的整数最小。请你以字符串形式返回这个最小的整数。 示例 1 …

chrome插件开发的几种展现页面形式,3分钟看完

想要开发一个chrome浏览器插件&#xff0c;还是很有必要清楚插件都可以在哪些地方显示出来的&#xff0c;比如只想在pop页面弹出&#xff0c;还是添加右键菜单&#xff0c;还是提示桌面通知&#xff1f;还是在哪里展示&#xff1f;有哪些展示方式等 browserAction(浏览器右上角…

原油数据处理:1.聚类、盐含量测定与近红外光谱快速评估

一、原油种类的聚类分析 在塔里木盆地塔河油田的原油处理过程中&#xff0c;需要对原油进行地球化学特征研究&#xff0c;以了解其成因和特征。根据地球化学手段的综合研究结果&#xff0c;塔河油田奥陶系原油属于海相沉积环境&#xff0c;成熟度较高&#xff0c;正构烷烃分布…

内存映射实现父子进程通信

创建内存映射区&#xff1a; void *mmap(void *addr ,size_t length,int prot,int flags,int fd,off_t offset); 参数&#xff1a; addr 指定映射区的首地址。通常NULL&#xff0c;表示让系统自动分配length 共享内存映射区的长度prot 共享内存的读写属性 PROT_READ PR…

【记录37】VueBaiduMap 踩坑一

截图 错误 Error in callback for watcher “position.lng”: “TypeError: Cannot read properties of undefined (reading ‘setPosition’)” 解释 回调观察程序“content”时出错&#xff1a;“TypeError:无法读取未定义的属性&#xff08;读取’setContent’&#xff09;”…