前端实现打印功能（vue）

最新推荐文章于 2023-11-02 17:01:56 发布

h**#

最新推荐文章于 2023-11-02 17:01:56 发布

阅读量562

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Hruibin/article/details/125445342

版权

第一步下载依赖

 npm install vue-print-nb --save

引入

import print from "vue-print-nb"; //打印

vue template 中代码

<button href="javascript:;" style="color:#cc4455" v-print="printObj">打印</button>
<div style="height:10px;overflow:hidden;opacity:0"  id="printMe">
    要打印的内容。。。
</div>

vue data代码

 printObj: {
        id: "printMe",//ID和上面保持一致 要打印的内容id
        // url:url,
        // preview:true,
        popTitle: "good print",
        extraCss:
          "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        beforeOpenCallback(vue) {
         //打印前回调
          vue.printLoading = true;
        },
        openCallback(vue) {
          vue.printLoading = false;
        },
        closeCallback(vue) {}
      },