devbox
小惠珠哦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小惠珠哦 | 2024-08-06 00:03:45

赞

踩

vue3-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.         <div id="printTest">
    3.           <div class="box_printTest">
    4.             <el-row>
    5.               <el-col :span="13"
    6.                 ><div class="grid-content ep-bg-purple"
    7.               /></el-col>
    8.               <el-col
    9.                 :span="11"
    10.                 style="
    11.                   font-size: 25px;
    12.                   color: rgb(51, 51, 153);
    13.                   font-weight: 600;
    14.                 "
    15.                 >COMMERCIAL INVOICE
    16.               </el-col>
    17.             </el-row>
    18.             <el-row>
    19.               <el-col
    20.                 :span="24"
    21.                 style="font-size: 15px; color: #000000; font-weight: bold"
    22.                 >XIAMEN VIGORTEAM TRADING CO.,LTD</el-col
    23.               >
    24.             </el-row>
    25.  
    26.             <el-row>
    27.               <el-col :span="14" style="font-size: 13px; color: #303133"
    28.                 >1501-1502 GOLDEN COAST PLAZA,NO.99 LUJIANG
    29.                 ROAD,XIAMEN,CHINA</el-col
    30.               >
    31.               <el-col :span="5">
    32.                 <el-row>Date:</el-row>
    33.                 <el-row>Invoice #:</el-row>
    34.                 <el-row>Purchase Order #</el-row>
    35.                 <el-row>L/C #</el-row>
    36.               </el-col>
    37.               <el-col :span="5">
    38.                 <el-row class="demo">July 24,2023</el-row>
    39.                 <el-row class="demo">WBG-123456</el-row>
    40.                 <el-row class="demo">JDG-123456</el-row>
    41.                 <el-row class="demo">BLG-123456</el-row>
    42.               </el-col>
    43.             </el-row>
    44.             <br />
    45.  
    46.             <el-row>
    47.               <el-col :span="10">
    48.                 <div style="background-color: rgb(51, 51, 153)">
    49.                   <span style="color: white; font-weight: bold">Bill To:</span>
    50.                 </div>
    51.               </el-col>
    52.               <el-col :span="4" />
    53.               <el-col :span="10"
    54.                 ><div style="background-color: rgb(51, 51, 153)">
    55.                   <span style="color: white; font-weight: bold">Ship To:</span>
    56.                 </div></el-col
    57.               >
    58.             </el-row>
    59.  
    60.             <el-row>
    61.               <el-col
    62.                 :span="10"
    63.                 style="font-size: 15px; color: #000000; font-weight: bold"
    64.                 >MR PRICE HOME ,A DIVISION OF MR PRICE GROUP LIM</el-col
    65.               >
    66.               <el-col :span="4" />
    67.               <el-col
    68.                 :span="10"
    69.                 style="font-size: 15px; color: #000000; font-weight: bold"
    70.                 >MR PRICE HOME ,A DIVISION OF MR PRICE GROUP Wen</el-col
    71.               >
    72.             </el-row>
    73.             <div style="height: 10px" />
    74.  
    75.             <el-row>
    76.               <el-col :span="10" style="font-size: 13px; color: #303133"
    77.                 >HEAD OFFICE,UPPER LEVEL NORTH CONCOURSE DURBAN STATION ，65
    78.                 MASABALALA YENGWA AVENUE DURBAN,SOUTH AFRICA</el-col
    79.               >
    80.               <el-col :span="4" />
    81.               <el-col :span="10" style="font-size: 13px; color: #303133"
    82.                 >HEAD OFFICE,UPPER LEVEL NORTH CONCOURSE，DURBAN STATION ，65
    83.                 MASABALALA YENGWA AVENUE DURBAN SOUTH AFRICA</el-col
    84.               >
    85.             </el-row>
    86.             <br />
    87.             <br />
    88.  
    89.             <el-row>
    90.               <el-col :span="24">
    91.                 <div style="background-color: rgb(51, 51, 153)">
    92.                   <span style="color: white; font-weight: bold"
    93.                     >Shipment Information</span
    94.                   >
    95.                 </div>
    96.               </el-col>
    97.             </el-row>
    98.             <div style="height: 10px" />
    99.  
    100.             <el-row>
    101.               <el-col :span="6" style="font-size: 13px; color: #303133"
    102.                 >Country of Origin</el-col
    103.               >
    104.               <el-col
    105.                 :span="18"
    106.                 style="font-size: 13px; color: #303133; border: 1px solid #333"
    107.                 >China</el-col
    108.               >
    109.             </el-row>
    110.             <div style="height: 10px" />
    111.  
    112.             <el-row>
    113.               <el-col :span="6" style="font-size: 13px; color: #303133"
    114.                 >Port of Loading</el-col
    115.               >
    116.               <el-col
    117.                 :span="5"
    118.                 style="font-size: 13px; color: #303133; border: 1px solid #333"
    119.                 >TIANJIN,CHINA</el-col
    120.               >
    121.               <el-col :span="1" />
    122.               <el-col :span="6" style="font-size: 13px; color: #303133"
    123.                 >Port of Destination</el-col
    124.               >
    125.               <el-col
    126.                 :span="6"
    127.                 style="font-size: 13px; color: #303133; border: 1px solid #333"
    128.                 >DURBAN,SOUTH,AFRICA</el-col
    129.               >
    130.             </el-row>
    131.             <div style="height: 10px" />
    132.  
    133.             <el-row>
    134.               <el-col :span="6" style="font-size: 13px; color: #303133"
    135.                 >Shiping Method</el-col
    136.               >
    137.               <el-col
    138.                 :span="5"
    139.                 style="font-size: 13px; color: #303133; border: 1px solid #333"
    140.                 >FOB</el-col
    141.               >
    142.             </el-row>
    143.             <!--            打印的表格-->
    144.             <div>
    145.               <el-table
    146.                 :data="baseProperty.tableData"
    147.                 :span-method="arraySpanMethod"
    148.                 border
    149.                 :header-cell-style="{
    150.                   background: '#333399',
    151.                   color: '#ffffff'
    152.                 }"
    153.                 :cell-style="{ color: '#000000' }"
    154.                 style="width: 100%; margin-top: 20px"
    155.               >
    156.                 <el-table-column
    157.                   prop="id"
    158.                   align="center"
    159.                   style="color: black"
    160.                   label="SHIPPING MARKS"
    161.                   width="150"
    162.                 />
    163.                 <el-table-column
    164.                   prop="name"
    165.                   align="center"
    166.                   label="DESCRIPTION OF GOODS"
    167.                   width="210"
    168.                 />
    169.                 <el-table-column
    170.                   prop="amount1"
    171.                   align="center"
    172.                   label="QTY"
    173.                   width="120"
    174.                 />
    175.                 <el-table-column
    176.                   align="center"
    177.                   prop="amount2"
    178.                   label="UNIT PRICE"
    179.                   width="120"
    180.                 />
    181.                 <el-table-column
    182.                   prop="amount3"
    183.                   align="center"
    184.                   label="AMOUNT"
    185.                   width="120"
    186.                 />
    187.               </el-table>
    188.             </div>
    189.  
    190.             <el-row>
    191.               <el-col :span="5" />
    192.               <el-col :span="11" style="font-size: 13px; color: #303133"
    193.                 >产地: 廊坊</el-col
    194.               >
    195.               <el-col
    196.                 :span="5"
    197.                 style="
    198.                   font-size: 13px;
    199.                   color: white;
    200.                   background-color: #003366;
    201.                   font-weight: bold;
    202.                 "
    203.                 >Total</el-col
    204.               >
    205.               <el-col
    206.                 :span="3"
    207.                 style="
    208.                   font-size: 13px;
    209.                   color: white;
    210.                   background-color: #003366;
    211.                   font-weight: bold;
    212.                 "
    213.                 >USD 10920.00</el-col
    214.               >
    215.             </el-row>
    216.             <br />
    217.             <el-row>
    218.               <el-col :span="24">
    219.                 <div style="background-color: rgb(51, 51, 153)">
    220.                   <span style="color: white; font-weight: bold"
    221.                     >Summary Information</span
    222.                   >
    223.                 </div>
    224.               </el-col>
    225.             </el-row>
    226.  
    227.             <el-row>
    228.               <el-col
    229.                 :span="16"
    230.                 style="
    231.                   font-size: 13px;
    232.                   color: #303133;
    233.                   border-bottom: 1px solid #333;
    234.                   border-right: 1px solid #333;
    235.                   border-left: 1px solid #333;
    236.                 "
    237.               >
    238.                 <div
    239.                   style="height: 100%; text-align: center; line-height: 100px"
    240.                 >
    241.                   TOTAL: U.SDOLLARS TEN THOUSAND NINE HUNDRED AND TWENTY ONLY
    242.                 </div>
    243.               </el-col>
    244.               <el-col
    245.                 :span="8"
    246.                 style="
    247.                   font-size: 13px;
    248.                   color: #303133;
    249.                   border-bottom: 1px solid #333;
    250.                   border-right: 1px solid #333;
    251.                 "
    252.               >
    253.                 <el-row style="border-bottom: 1px solid #333">
    254.                   <el-col :span="12"
    255.                     ><span style="font-weight: bold"> Total QTY </span></el-col
    256.                   >
    257.                   <el-col :span="12">
    258.                     <div style="text-align: center">1680PCS</div>
    259.                   </el-col>
    260.                 </el-row>
    261.                 <el-row style="border-bottom: 1px solid #333">
    262.                   <el-col :span="12"
    263.                     ><span style="font-weight: bold"> Total CBM </span></el-col
    264.                   >
    265.                   <el-col
    266.                     :span="12"
    267.                     style="background-color: rgb(192, 192, 192)"
    268.                   >
    269.                     <div style="text-align: center">60.06CBM</div>
    270.                   </el-col>
    271.                 </el-row>
    272.  
    273.                 <el-row>
    274.                   <el-col :span="12"
    275.                     ><span style="font-weight: bold"> Container </span></el-col
    276.                   >
    277.                   <el-col :span="12">
    278.                     <div style="text-align: right">*20°FCL</div>
    279.                   </el-col>
    280.                 </el-row>
    281.  
    282.                 <el-row>
    283.                   <el-col :span="12" />
    284.                   <el-col
    285.                     :span="12"
    286.                     style="background-color: rgb(192, 192, 192)"
    287.                   >
    288.                     <div style="text-align: right">*40°FCL</div>
    289.                   </el-col>
    290.                 </el-row>
    291.  
    292.                 <el-row>
    293.                   <el-col :span="12" />
    294.                   <el-col :span="12">
    295.                     <div style="text-align: right">*40°HQ&nbsp;</div>
    296.                   </el-col>
    297.                 </el-row>
    298.  
    299.                 <el-row>
    300.                   <el-col :span="12" />
    301.                   <el-col
    302.                     :span="12"
    303.                     style="background-color: rgb(192, 192, 192)"
    304.                   >
    305.                     <div style="text-align: right">*45°HQ&nbsp;</div>
    306.                   </el-col>
    307.                 </el-row>
    308.               </el-col>
    309.             </el-row>
    310.           </div>
    311.         </div>
    312.  
    313.  
    314.  
    315.  
    316. //表格数据
    317. const baseProperty = reactive({
    318.   userCode: "",
    319.   dragBtnBC1: "#e5e4e9",
    320.   dragBtnBC2: "#e5e4e9",
    321.   searchTab: "Regular Data",
    322.   openSearch: false,
    323.   topDivShow: true,
    324.   buttonTab: "Split Shipping Plan",
    325.   topDivShowFull: false,
    326.   loading: false,
    327.   subSkuList: [],
    328.   warehouseList: [],
    329.   overseasWarehouseList: [],
    330.   shippingPlanMethodList: [],
    331.   fobPortList: [],
    332.   leftStyle: "width: 73%-10px",
    333.   rightStyle: "width: 27%; height: 100%",
    334.   rightShow: false,
    335.   show: false,
    336.   searchForm: {
    337.     shippingPlanOrder: "",
    338.     status: "",
    339.     page: 1,
    340.     limit: 10
    341.   },
    342.   tableData: [
    343.     {
    344.       id: "12987122",
    345.       name: "A03-01-PP001\n" + "H.S.CODE:9401690090\n" + "产品尺寸:53*53*51",
    346.       amount1: "682PCS",
    347.       amount2: "USD 6.50",
    348.       amount3: "USD 4420.00"
    349.     },
    350.     {
    351.       id: "12987123",
    352.       name: "A03-01-PP001\n" + "H.S.CODE:9401690090\n" + "产品尺寸:53*53*51",
    353.       amount1: "700PCS",
    354.       amount2: "USD 6.50",
    355.       amount3: "USD 4550.00"
    356.     },
    357.     {
    358.       id: "12987124",
    359.       name: "A03-01-PP001\n" + "H.S.CODE:9401690090\n" + "产品尺寸:53*53*51",
    360.       amount1: "300PCS",
    361.       amount2: "USD 6.50",
    362.       amount3: "USD 1950.00"
    363.     },
    364.   ]
    365. });

  4. 打印按钮

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

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

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

  6. 去掉页眉页脚

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/934916
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号