大横幅1
大横幅2
到期时间:永久 到期时间:推广
小横幅3 小横幅4
  1. 当前位置:网站首页 > 技术教程

vue实现打印及导出


安装命令:

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>
 

本文最后更新于2023-1-6,已超过 3个月没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
获取更多资讯请加入交流群

    协助本站SEO优化一下,谢谢!
    关键词不能为空
版权说明

本文地址:http://kirinbk.cn/post-753.html
免责声明:本站文章仅用于科普及教育用途,远离犯罪!

发表评论

联系我们

在线咨询:点击这里给我发消息

QQ交流群:KirinBlog

工作日:8:00-23:00,节假日休息

扫码关注