Vue实现PDF导出和打印功能

在Vue页面上实现PDF导出和打印功能依赖于两个npm插件，分别为vue-to-pdf和vue-easy-printer。

安装命令：

npm i vue-to-pdf --save
npm i vue-easy-printer --save

在main.js/App.js中加入引用：

import vueToPdf from 'vue-to-pdf';
import VueEasyPrinter from 'vue-easy-printer';
Vue.use(vueToPdf);
Vue.use(VueEasyPrinter);

这两个插件都可以页面局部打印和导出，先在想操作的dom节点上加入id和ref：

 <div id="exportPdf" ref="exportPdf"></div>

然后在按钮上加入点击事件：

 <input type="button" @click="printPdf">打印</input><input type="button" @click="savePdf" >导出(pdf)</input>

定义函数：

   savePdf(){this.$PDFSave(this.$refs.exportPdf, "我的文件");},printPdf(){this.$easyPrint('exportPdf',"我的文件",'portrait');}

其中$easyPrint方法的第三个参数，还可以传landscape，代表页面横向展示，portrait为竖向展示

Vue实现PDF导出和打印功能相关推荐

vue实现pdf导出，解决生成canvas模糊等问题
vue实现pdf导出,解决生成canvas模糊等问题参考文章: (1)vue实现pdf导出,解决生成canvas模糊等问题 (2)https://www.cnblogs.com/jsonYoung/ ...
VUE整合VUE-PRINT-NB实现前端打印功能
VUE整合VUE-PRINT-NB实现前端打印功能插件安装 npm install vue-print-nb --save 插件安装时最好在package.json中同时加入依赖信息,便于项目上其他 ...
Vue前端实现excel的导入、导出、打印功能
目录一.相关依赖下载二.excel导入功能三.table导出excel表格 1.导出行数据 2.导出table数据(也会导出合并单元格) 3.导出二维数据的table数据 4.导出合并单元格ta ...
vue js 前端导出下载打印图片 pdf html 局部打印
html2canvas将HTML内容写入Canvas生成图片 print.js 打印插件第一种方法: 原生js printDeal(val) {var printBox = document.ge ...
Vue实现分页导出，打印
Vue使用html2Canvas+printJS实现分页导出,打印 1.插件引入 npm i html2canvas npm i print-js 2.使用模板 <template>< ...
Vue使用PrintJS实现页面打印功能
说明大家好,我是呆小杰,收到一个需求,要求实现拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能. 实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内 ...
VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
java pdf预览打印_Android实现PDF预览打印功能
最近在做一个项目,需要用到android手机连接打印机进行打印的功能,目前在网上找到的教程介绍的都是蓝牙连接热敏打印机(pos机大小的打印机)和蓝牙打印机,如果连接日常所见到的网络打印机,进行打印,很 ...
【iOS】保存PDF文件和打印功能
新的需求又来了,这次的需求是用户可以在App中打印当前页面,也可以将当前页面保存成pdf文件,以便日后打印. 首先解决一下保存文件的问题,用户需要在文件管理中能查看pdf文件.iOS允许暴露给用户的只 ...

Vue实现PDF导出和打印功能

Vue实现PDF导出和打印功能相关推荐

最新文章

热门文章