Vue3使用vue-print-nb插件打印功能

 插件官网地址https://www.npmjs.com/package/vue-print-nb

 效果展示:

打印效果

1.  根据不同的Vue版本安装插件

   //Vue2.0版本安装方法
   npm install vue-print-nb --save
   pnpm install vue-print-nb --save
   yarn add vue-print-nb
   
   
   //Vue3.0版本安装方法：
   npm install vue3-print-nb --save
   pnpm install vue3-print-nb --save
   yarn add vue3-print-nb

2. 全局挂载

   //在mian.ts文件中加入
   import Print from 'vue-print-nb'
   Vue.use(Print)

3. 打印页面的样式

           
           
   
             
   
               
                 
   
                 COMMERCIAL INVOICE
                 
               
               
                 XIAMEN VIGORTEAM TRADING CO.,LTD
               
   
               
                 1501-1502 GOLDEN COAST PLAZA,NO.99 LUJIANG
                   ROAD,XIAMEN,CHINA
                 
                   Date:
                   Invoice #:
                   Purchase Order #
                   L/C #
                 
                 
                   July 24,2023
                   WBG-123456
                   JDG-123456
                   BLG-123456
                 
               
               
   
   
               
                 
                   
   
                     Bill To:
                   
                 
                 
                 
   
                     Ship To:
                   
               
   
               
                 MR PRICE HOME ,A DIVISION OF MR PRICE GROUP LIM
                 
                 MR PRICE HOME ,A DIVISION OF MR PRICE GROUP Wen
               
               
   
   
               
                 HEAD OFFICE,UPPER LEVEL NORTH CONCOURSE DURBAN STATION ，65
                   MASABALALA YENGWA AVENUE DURBAN,SOUTH AFRICA
                 
                 HEAD OFFICE,UPPER LEVEL NORTH CONCOURSE，DURBAN STATION ，65
                   MASABALALA YENGWA AVENUE DURBAN SOUTH AFRICA
               
               
   
               
   
   
               
                 
                   
   
                     Shipment Information
                   
                 
               
               
   
   
               
                 Country of Origin
                 China
               
               
   
   
               
                 Port of Loading
                 TIANJIN,CHINA
                 
                 Port of Destination
                 DURBAN,SOUTH,AFRICA
               
               
   
   
               
                 Shiping Method
                 FOB
               
               
               
   
                 
                   
                   
                   
                   
                   
                 
               
   
               
                 
                 产地: 廊坊
                 Total
                 USD 10920.00
               
               
   
               
                 
                   
   
                     Summary Information
                   
                 
               
   
               
                 
                   
   
                     TOTAL: U.SDOLLARS TEN THOUSAND NINE HUNDRED AND TWENTY ONLY
                   
                 
                 
                   
                      Total QTY 
                     
                       
   1680PCS
                     
                   
                   
                      Total CBM 
                     
                       
   60.06CBM
                     
                   
   
                   
                      Container 
                     
                       
   *20°FCL
                     
                   
   
                   
                     
                     
                       
   *40°FCL
                     
                   
   
                   
                     
                     
                       
   *40°HQ 
                     
                   
   
                   
                     
                     
                       
   *45°HQ 
                     
                   
                 
               
             
           
   
   
   
   
   //表格数据
   const baseProperty = reactive({
     userCode: "",
     dragBtnBC1: "#e5e4e9",
     dragBtnBC2: "#e5e4e9",
     searchTab: "Regular Data",
     openSearch: false,
     topDivShow: true,
     buttonTab: "Split Shipping Plan",
     topDivShowFull: false,
     loading: false,
     subSkuList: [],
     warehouseList: [],
     overseasWarehouseList: [],
     shippingPlanMethodList: [],
     fobPortList: [],
     leftStyle: "width: 73%-10px",
     rightStyle: "width: 27%; height: 100%",
     rightShow: false,
     show: false,
     searchForm: {
       shippingPlanOrder: "",
       status: "",
       page: 1,
       limit: 10
     },
     tableData: [
       {
         id: "12987122",
         name: "A03-01-PP001\n" + "H.S.CODE:9401690090\n" + "产品尺寸:53*53*51",
         amount1: "682PCS",
         amount2: "USD 6.50",
         amount3: "USD 4420.00"
       },
       {
         id: "12987123",
         name: "A03-01-PP001\n" + "H.S.CODE:9401690090\n" + "产品尺寸:53*53*51",
         amount1: "700PCS",
         amount2: "USD 6.50",
         amount3: "USD 4550.00"
       },
       {
         id: "12987124",
         name: "A03-01-PP001\n" + "H.S.CODE:9401690090\n" + "产品尺寸:53*53*51",
         amount1: "300PCS",
         amount2: "USD 6.50",
         amount3: "USD 1950.00"
       },
     ]
   });

4. 打印按钮

   // printTest是需要打印内容的div的id ，并在前面加上#                     
   COMMERCIAL INVOICE
   

5. 关于颜色存在偏差的问题

   @media print {
     // 强制打印背景(这样才能打印出背景颜色)    Kris_wen
     * {
       -webkit-print-color-adjust: exact !important;
     }
   }

6. 去掉页眉页脚

   /* 去掉页眉页脚 */
   @page {
     size: auto;
     margin: 0mm;
   }

7. 表格最好使用原生的HTML原生的表格，使用element-table会出现分页割断的问题。

8. 有些数据是要先通过ajax从后端取出，在调用打印方法的。