vue自定义打印页面样式

步骤1：全局引入

npm install print-js --save

步骤2：组件内引用

import printHtml from 'print-js'

import Print from './components/Print.vue'

步骤3：创建实例方法

components: {   

    Print,

  },

print() {

// 更改页面打印名称

    document.title = '******'  '.pdf'

    printHtml({

      printable: 'printMe', // 文档来源：pdf或图像url，html元素ID或json数据对象

      type: 'html', // 可打印的类型。可用的打印选项包括：pdf，html，图像，json和raw-html。

      // css: 'Print.css', // 这使我们可以传递一个或多个CSS文件URL，这些URL应该应用于要打印的html。值可以是具有单个URL的字符串或具有多个URL的数组。

      scanStyles: false, // 设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用。

      style: '@media print{@page {size:landscape}}',

      showModal: true

    })

  }

步骤4：创建print 页面  注意：id与print方法内 printable的参数保持一致 ，因为样式类不起作用 只能在元素style属性内写

                 

                 

                   

                      colspan="2"

                      style="

                        height: 38px;

                        border: 1px solid black;

                        vertical-align: center;

                        text-align: center;

                      "

                    >

                      本调拨单合计金额(元)

                   

                   

                      colspan="2"

                      style="

                        height: 38px;

                        border: 1px solid black;

                        vertical-align: center;

                        text-align: center;

                        font-family: SimSun

                      "

                    >

                      {{ printData.totalAmount | numFormat }}

                   

                   

                      colspan="3"

                      style="

                        height: 38px;

                        border: 1px solid black;

                        vertical-align: center;

                        text-align: center;

                      "

                    >

                      本页金额小计(元)

                   

                   

                      colspan="2"

                      style="

                        height: 20px;

                        border: 1px solid black;

                        vertical-align: center;

                        text-align: center;

                        font-family: SimSun

                      "

                    >

                      {{

                        printData.itemList

                          .slice(i * pageSize, (i + 1) * pageSize)

                          .map((item) => item.itemAmount)

                          .reduce((pre, next) => pre + next, 0) | numFormat

                      }}

                   

                 

               

             

             

               

               

                  style="display: flex;  width: 500px;"

                >

                 

签发单位(公章):

                 

{{ printData.managermentOrganizationName?printData.managermentOrganizationName:'' }}

               

局(处)长:

               

               

                  style="display: flex; justify-content: space-around;width: 450px;"

                >

                 

                 

承办人:

                 

电话:{{ printData.phone?printData.phone:'' }}