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

使用文档：https://www.npmjs.com/package/vue-print-nb

一. vue-print-nb 的使用

1.1 安装 vue-print-nb

npm install vue-print-nb --save

1.2. 引入vue-print-nb

1. main.js 中全局引入

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

2. 组件中 引入使用

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

3. 使用 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",//必填项，需部分打印输入的ID
           popTitle: "一个打印文件",//标题显示标题
           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",//必填，需部分打印输入的ID
        popTitle: "一个打印文件",//标题显示标题
        extraCss: "https://www.google.com,https://www.google.com",//附加链接连接，以逗号分隔
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',//附加到head标签的附加标签，以逗号分隔
      },
    };
  },
};
</script>

<style scoped>
</style>