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

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

     效果展示:

    打印效果

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

      1. //Vue2.0版本安装方法
      2. npm install vue-print-nb --save
      3. pnpm install vue-print-nb --save
      4. yarn add vue-print-nb
      5.  
      6.  
      7. //Vue3.0版本安装方法：
      8. npm install vue3-print-nb --save
      9. pnpm install vue3-print-nb --save
      10. yarn add vue3-print-nb

    2. 全局挂载

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

    3. 打印页面的样式

      1.         
      2.         
      3.           
      4.             
      5.               
      6.                 >
      7.               />
      8.               
      9.                 :span="11"
      10.                 style="
      11.                   font-size: 25px;
      12.                   color: rgb(51, 51, 153);
      13.                   font-weight: 600;
      14.                 "
      15.                 >COMMERCIAL INVOICE
      16.               
      17.             
      18.             
      19.               
      20.                 :span="24"
      21.                 style="font-size: 15px; color: #000000; font-weight: bold"
      22.                 >XIAMEN VIGORTEAM TRADING CO.,LTD
      23.               >
      24.             
      25.  
      26.             
      27.               
      28.                 >1501-1502 GOLDEN COAST PLAZA,NO.99 LUJIANG
      29.                 ROAD,XIAMEN,CHINA
      30.               >
      31.               
      32.                 Date:
      33.                 Invoice #:
      34.                 Purchase Order #
      35.                 L/C #
      36.               
      37.               
      38.                 July 24,2023
      39.                 WBG-123456
      40.                 JDG-123456
      41.                 BLG-123456
      42.               
      43.             
      44.             
      45.  
      46.             
      47.               
      48.                 
      49.                   Bill To:
      50.
  • >
  • Ship To:
  • >
  • :span="10"
  • style="font-size: 15px; color: #000000; font-weight: bold"
  • >MR PRICE HOME ,A DIVISION OF MR PRICE GROUP LIM
  • >
  • :span="10"
  • style="font-size: 15px; color: #000000; font-weight: bold"
  • >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
  • >
  • :span="18"
  • style="font-size: 13px; color: #303133; border: 1px solid #333"
  • >China
  • >
  • >Port of Loading
  • >
  • :span="5"
  • style="font-size: 13px; color: #303133; border: 1px solid #333"
  • >TIANJIN,CHINA
  • >
  • >Port of Destination
  • >
  • :span="6"
  • style="font-size: 13px; color: #303133; border: 1px solid #333"
  • >DURBAN,SOUTH,AFRICA
  • >
  • >Shiping Method
  • >
  • :span="5"
  • style="font-size: 13px; color: #303133; border: 1px solid #333"
  • >FOB
  • >
  • :data="baseProperty.tableData"
  • :span-method="arraySpanMethod"
  • border
  • :header-cell-style="{
  • background: '#333399',
  • color: '#ffffff'
  • }"
  • :cell-style="{ color: '#000000' }"
  • style="width: 100%; margin-top: 20px"
  • >
  • prop="id"
  • align="center"
  • style="color: black"
  • label="SHIPPING MARKS"
  • width="150"
  • />
  • prop="name"
  • align="center"
  • label="DESCRIPTION OF GOODS"
  • width="210"
  • />
  • prop="amount1"
  • align="center"
  • label="QTY"
  • width="120"
  • />
  • align="center"
  • prop="amount2"
  • label="UNIT PRICE"
  • width="120"
  • />
  • prop="amount3"
  • align="center"
  • label="AMOUNT"
  • width="120"
  • />
  • >产地: 廊坊
  • >
  • :span="5"
  • style="
  • font-size: 13px;
  • color: white;
  • background-color: #003366;
  • font-weight: bold;
  • "
  • >Total
  • >
  • :span="3"
  • style="
  • font-size: 13px;
  • color: white;
  • background-color: #003366;
  • font-weight: bold;
  • "
  • >USD 10920.00
  • >

  • >Summary Information
  • >
  • :span="16"
  • style="
  • font-size: 13px;
  • color: #303133;
  • border-bottom: 1px solid #333;
  • border-right: 1px solid #333;
  • border-left: 1px solid #333;
  • "
  • >
  • style="height: 100%; text-align: center; line-height: 100px"
  • >
  • TOTAL: U.SDOLLARS TEN THOUSAND NINE HUNDRED AND TWENTY ONLY
  • :span="8"
  • style="
  • font-size: 13px;
  • color: #303133;
  • border-bottom: 1px solid #333;
  • border-right: 1px solid #333;
  • "
  • >
  • > Total QTY
  • >
  • 1680PCS
  • > Total CBM
  • >
  • :span="12"
  • style="background-color: rgb(192, 192, 192)"
  • >
  • 60.06CBM
  • > Container
  • >
  • *20°FCL
  • :span="12"
  • style="background-color: rgb(192, 192, 192)"
  • >
  • *40°FCL
  • *40°HQ 
  • :span="12"
  • style="background-color: rgb(192, 192, 192)"
  • >
  • *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"
  • },
  • ]
  • });

  • 打印按钮

    1. // printTest是需要打印内容的div的id ，并在前面加上#                     
    3. @click="toPrint(row)"
    4. v-print="'#printTest'"
    5. size="default"   
    6. link
    7. type="primary"
    8. >COMMERCIAL INVOICE

  • 关于颜色存在偏差的问题

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

  • 去掉页眉页脚

    1. /* 去掉页眉页脚 */
    2. @page {
    3.   size: auto;
    4.   margin: 0mm;
    5. }

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

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

  • 相关阅读:
    mac系统安装docker desktop
    React SSG - 也写个 Demo 吧
    【web开发】11、文件的上传
    使用Python实现多线程、多进程、异步IO的socket通信
    隧道代理 vs 普通代理：哪种更适合您的爬虫应用？
    SpringCloud进阶-Eureka基础知识与搭建单机Eureka
    【Java】什么是过滤器链（FilterChain ）？哪些场景可以使用过滤器链？
    pmp项目管理考试是什么？适合哪些人学？
    读书充电，温暖你的冬日，本期为大家送出几本架构师成长和软件架构技术相关的好书，助你度过这个不太景气的寒冬！
    中秋节学习腾讯云轻量应用服务器
  • 原文地址：https://blog.csdn.net/PaceMak1r777/article/details/134314318