一. vue-print-nb 的使用

1.1 安装 vue-print-nb

npm install vue-print-nb --save

1.2. 引入vue-print-nb

main.js 中全局引入

import Print from 'vue-print-nb'
Vue.use(Print);

组件中引入使用

import print from "vue-print-nb";
export default {directives: {print,},
};

使用 vue-print-nb 打印页面

(1) 打印整个页面

<button v-print>Print the entire page</button>

(2) 打印范围内页面
v-print 指定打印范围的 id 选择器

<div id="printMe"><p>葫芦娃，葫芦娃</p><p>一根藤上七朵花</p><p>小小树藤是我家 啦啦啦啦</p><p>叮当当咚咚当当　浇不大</p><p>叮当当咚咚当当 是我家</p><p>啦啦啦啦</p><p>...</p>
</div>
<button v-print="'#printMe'">开始打印</button>

(3) 打印范围内页面，并设置打印配置

HTML

<div id="printMe"><p>葫芦娃，葫芦娃</p><p>一根藤上七朵花</p><p>小小树藤是我家 啦啦啦啦</p><p>叮当当咚咚当当　浇不大</p><p>叮当当咚咚当当 是我家</p><p>啦啦啦啦</p><p>...</p>
</div>
<button v-print="printObj">开始打印</button>

JavaScript

export default {data() {return {printObj: {id: "printMe",//必填项，需部分打印输入的IDpopTitle: "一个打印文件",//标题显示标题extraCss: "https://www.google.com,https://www.google.com",//附加链接连接，以逗号分隔extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',//附加到head标签的附加标签，以逗号分隔},};},
};

二. 一个打印实例

<template><div><div id="printMe" style="background: red"><p>葫芦娃，葫芦娃</p><p>一根藤上七朵花</p><p>小小树藤是我家 啦啦啦啦</p><p>叮当当咚咚当当　浇不大</p><p>叮当当咚咚当当 是我家</p><p>啦啦啦啦</p><p>...</p></div><!-- 3. 使用vue-print-nb --><button v-print="printObj">Print local range</button></div>
</template><script>
/**1.安装vue-print-nb */
//npm install vue-print-nb --save
/**2.引入vue-print-nb */
import print from "vue-print-nb";
export default {directives: {print,},data() {return {printObj: {id: "printMe",//必填，需部分打印输入的IDpopTitle: "一个打印文件",//标题显示标题extraCss: "https://www.google.com,https://www.google.com",//附加链接连接，以逗号分隔extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',//附加到head标签的附加标签，以逗号分隔},};},
};
</script><style scoped>
</style>

Vue - 下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）相关推荐

java实现分页打印功能_web 页面分页打印的实现
1．首先引入一个WebBrowser在需要打印的页面,可以直接添加: 复制代码代码如下: 到页面,或者使用javascript在需要的时候临时添加也可以: 复制代码代码如下: document.b ...
html表格打印成pdf格式文件,使用html2pdf打印PDF格式文件中的数据作为PDF文件
我想从表单文章中获取一些数据并将其输出到PDF2文件中,并在同一页面上使用html2pdf.但是,当试图将表单数据发布到同一页面时,它不会打开PDF文件,这可能是因为PHP文件的其余部分将出现在if( ...
根据文献标题免费下载PDF格式文件的文献内容
根据文献标题免费下载PDF格式文件的文献内容通过文献名下载文献:较为通用,如有不能下载情况请留言. 第一步:根据文献名,查出文献的DOI. 进入https://www.crossref.org/ , ...
java jsp导出pdf文件_JSP页面导出PDF格式文件
JSP页面导出PDF格式文件基本在前端页面可以全部完成添加下载链接的点击事件 var downPdf = document.getElementById("downLoad"); ...
富文本编辑器导出html静态页面和pdf格式文件
在这里记录的都是在项目开发中遇到的问题,都是自己查找网上资料,经过测试总结出来的,就是希望有同样需求的人可以少走弯路. 本人当前使用的是若依框架自带的富文本编辑器,附上相关图片,具体的代码可以查看若依 ...
软件测试ppt打印功能,惠普P1566打印设置与性能测试
05惠普P1566打印设置与性能测试 ●惠普P1566打印设置与性能测试 ★惠普P1566主要的打印设置在打印速度测试开始之前,我们先来了解一下惠普P1566的打印设置.其打印首选项界面简洁,让用户 ...
avue-crud自带的打印功能BUG，在打印时会打印操作栏
问题描述打印时会显示操作栏问题解决效果代码如下: 用插槽自定义打印按钮,记得去掉option中的printBtn:true, 此处的打印,在试了很多组件后,决定使用vxe-table的打印组件 ...
pdf打印机安装程序_CAD快速出打印PDF格式文件
pdf最大的特点就是只能查看,不可编辑. 我们肯定不能够直接给到客户CAD源文件, 所以我们需要把CAD文件格式,转换成为PDF格式. PDF格式,比起CAD文件,能够更好的阅览 CAD是不能够直接生 ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...

Vue - 下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）

Vue 使用 vue-print-nb 插件实现打印功能

一. vue-print-nb 的使用

1.1 安装 vue-print-nb

1.2. 引入vue-print-nb

二. 一个打印实例

Vue - 下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）相关推荐

最新文章

热门文章