vue项目使用Print.js插件实现PDF文件打印

简介: vue项目使用Print.js插件实现PDF文件打印

一,Print.js介绍

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

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

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

  • 原生js,不依赖其它库
  • 可指定打印(或不打印)区域
  • 支持css样式(内联、外联、嵌入)
  • 支持input(radio/checkbox/text)、select、textarea值获取

二,下载安装

Print.js下载地址:https://download.csdn.net/download/weixin_43025151/87606898

或者使用npm安装

npm install print-js --save

引入到自己的项目中:

import print from 'print-js'

三,配置项

Print.js将接受一个对象作为参数,您可以在其中配置一些选项:

四,实现思路与项目示例

实现思路:将目标区域的dom/css添加到空iframe中,打印该iframe。

1) pdf的打印
<button type="button" onclick="printJS('docs/printjs.pdf')">
        Print PDF
     </button>
2)base64
<button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
  </button>
3)html的打印
<form method="post" action="#" id="printJS-form">
     ...
   </form>
   <button type="button" onclick="printJS('printJS-form', 'html')">
     Print Form
   </button>
4)图片的打印
<img src="images/print-01.jpg" />
   printJS('images/print-01-highres.jpg', 'image')
   
   //打印多张图片
    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;'
     })
5)打印json
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>

整个vue文件:

<template>
  <div id="app">
    <div id="divPrint" class="mainbox print">
      <!-- <div style="font-size: 25px; margin-top: 80px" align="center">
        整改通知单
      </div> -->
      <div align="center" style="margin: 0; padding: 0; width: 100%">
        <table>
          <tr style="border: none">
            <td colspan="2">工程项目:xx</td>
            <td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
          </tr>
          <tr style="border: none">
            <td colspan="2">整改单位:xx</td>
            <td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
          </tr>
          <tr style="border: none">
            <td colspan="2">整改内容:xx</td>
            <td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
          </tr>
        </table>
      </div>
    </div>
    <div style="margin-top: 20px; text-align: center">
      <button @click="print()">pdf打印</button>
    </div>
  </div>
</template>
<script>
import printJS from "print-js";
export default {
  name: "printing",
  data() {
    return {};
  },
  methods: {
    print() {
      printJS({
        printable: "divPrint", // 标签元素id
        type: "html", // 打印类型
        header: "整改通知单", // '表单名称',
        targetStyles: ["*"],
        style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
        ignoreElements: ["no-print"], // 接受打印父 html 元素时应忽略的 html id 数组。
        properties: null,
      });
    },
  },
};
</script>
<style lang="scss">
#app {
  width: 100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  .mainbox {
    width: 100%;
    margin: 0 auto;
  }
}
</style>

点击打印按钮后,出现PDF预览。

五,分析:

经过多次实战演练:

如果要打印的样式比较复杂,并且有字体图标等,建议选择第一种;

如果打印表格数据,比如element表格,还可以按需勾选进行打印,选择第二种打印方式比较好。

再分享一个强制分页打印,每页只打印固定的内容:

只需要在要分页打印的末尾加上:

<div style="page-break-after:always"></div>

即可

代码如下:

<div id="printTable"
                   v-for="(arr, i) in saveListArray"
                   :key="i"
                   style="position: relative; background-color:rgb(236,230,232);margin-top:5px;"
                   :class="printWay == 3 ? 'printTableActive' : ''"
                   :style="{
                    width: containerWidth + 'mm',
                    height: containerHeight + 'mm',
                   }">
                <el-container v-for="(item, index) in arr"
                              :key="index">
                  <div id="printColor"
                       v-bind:style="{
                    width: Number(item.GoodInvoiceDetailWidth) + 'mm',
                    height: item.GoodInvoiceDetailHeight + 'mm',
                    'line-height': item.GoodInvoiceDetailHeight + 'mm',
                    left: Number(item.GoodInvoiceDetailCoordinateX) + Number(x) + 'mm',
                    top: Number(item.GoodInvoiceDetailCoordinateY) + Number(y) + 'mm',
                    color: item.GoodInvoiceDetailColour + '',
                    'font-size': item.GoodInvoiceDetailSize + 'mm',
                    'font-family': item.GoodInvoiceDetailFont + '',
                    'text-align': item.GoodInvoiceDetailPosition + '',
                    'border-top': item.GoodFramSize*0.1+0.1 + 'mm' + item.GoodFramSolidlineIf + item.borderTcolor,
                    'border-bottom': item.GoodFramSize*0.1+0.1 + 'mm' + item.GoodFramSolidlineIf + item.borderBcolor,
                    'border-left': item.GoodFramSize*0.1+0.1 + 'mm' + item.GoodFramSolidlineIf + item.borderLcolor,
                    'border-right': item.GoodFramSize*0.1+0.1 + 'mm' + item.GoodFramSolidlineIf + item.borderRcolor,
                    overflow: item.overflow,
                    }"
                       style=" display: inline-block;
                    text-align:left;
                    position: absolute;
                    cursor: move;">
                    <div v-if="item.GraphContent"><img :src="item.GraphContent"
                           style="width:100%;height:100%;margin-top:4px;"></div>
                    <div v-else
                         style="margin-right:3px;margin-left:3px;">{{ item.GoodInvoiceDetailName }}</div>
                  </div>
                </el-container>
                <div style="page-break-after:always"></div>
              </div>

下面展示两种图片:(一张没有加分页的,和加了分页的区别)

六,注意

不支持background-color背景色打印,试试用background-image代替,只在浏览器中预览打印,未实际打印过, 公司无公用打印机,低级浏览器兼容性待验证。

目录
相关文章
|
12天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
27 4
|
2天前
|
文字识别 测试技术 数据安全/隐私保护
案例:批量区域识别内容重命名,批量识别扫描PDF区域内容识别重命名,批量识别图片区域内容重命名图片修改图片名字,批量识别图片区域文字并重命名,批量图片部分识别内容重命文件,PDF区域内容提取重命名
该内容介绍了如何使用区域识别重命名软件高效整理图片,例如将图片按时间及内容重命名,适用于简历、单据等识别。文中提供了软件下载链接(百度云盘和腾讯网盘),并列出软件使用的几个关键条件,包括文字清晰、文件名长度限制等。示例展示了银行单据和公司工作单据的识别情况。文章还提及OCR技术在图片文字识别中的应用,强调了识别率、误识率和用户友好性等评估指标。如有类似需求,读者可留言或下载软件测试,并提供图片以获取定制的识别方案。
|
7天前
|
数据采集 数据安全/隐私保护 Python
2024年最新【Python】如何用Python来操作PDF文件,收藏(2),2024年最新阿里p7Python面试题
2024年最新【Python】如何用Python来操作PDF文件,收藏(2),2024年最新阿里p7Python面试题
2024年最新【Python】如何用Python来操作PDF文件,收藏(2),2024年最新阿里p7Python面试题
|
12天前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
11 0
|
12天前
|
JavaScript 前端开发 开发者
.js 文件和 .mjs 文件的区别
.js 文件和 .mjs 文件的区别
44 0
|
12天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
21 3
|
2天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
9 1
|
2天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
7 1
|
3天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
5天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
27 0