首页
   /       /   
vue实现打印及导出
1月
7
vue实现打印及导出
作者:大彭Sir    分类: 随手笔记

安装命令:

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

绑定事件

<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\');
}

另外一个打印安装

npm install vue-print-nb --save

全局注册

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

使用

用v-print指定需要打印的div容器,本次叫printTest。
最好使用行内样式,使用组件库部分样式可能不能生成。

<div id="printTest" >
           <p>锄禾日当午</p>
      <p>汗滴禾下土 </p>
      <p>谁知盘中餐</p>
      <p>粒粒皆辛苦</p>
    </div>
    <button v-print="'#printTest'">打印</button>

不打印区域

<div class="no-print">不要打印我</div>
本文标签:标签: VUE 插件 打印 导出 PDF
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录