vue2 使用print.js实现打印功能

记录print.js实现打印功能的过程。

参考文章：前端使用print.js实现打印

• 安装及导入

方式一：在官网下载

官网：Print.js - Javascript library for HTML elements, PDF and image files printing.

• 将下载的print.js放到utils目录下
• 全局引入（在main.js中），或者局部引入（在需要的文件中引入）

import Print from '@/utils/print.js'

方式二：npm下载print.js插件

// npm
 npm install print-js --save

// yarn
  yarn add print-js

• 全局引入（在main.js中），或者局部引入（在需要的文件中引入）

import Print from 'print-js'

• 使用方法

可以通过给打印区域设置class类名或id值，也可以使用ref获取DOM节点。

这里是给打印区域设置id值。

<div class="printJs-container" id="allPage">
    <div id="printPage" class="common-printPage">
      <div class="button-container">
        <el-button type="primary" class="common-button" @click="printType('onePicture')">打印一张图片</el-button>
        <el-button type="primary" class="common-button" @click="printType('allPicture')">打印全部图片</el-button>
        <el-button type="primary" class="common-button" @click="printType('json')">打印Json</el-button>
        <el-button type="primary" class="common-button" @click="printType('html')">打印html</el-button>
      </div>
      <div class="img-container" id="imgPrint">
        <div v-for="item in 4">
          <img :src="Logo" alt="" class="logo-img">
        </div>
      </div>
      <div class="json-container" id="jsonPrint">
        <el-table
          :data="tableData"
          border
        >
          <el-table-column label="活动" prop="title"></el-table-column>
          <el-table-column label="描述" prop="decs"></el-table-column>
          <el-table-column label="状态" prop="state"></el-table-column>
          <el-table-column label="活动时间" prop="created_at"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>

局部引入print-js，指定不同的打印类型。

<script>
import { editTableData } from '@/mock/jsModule/table.js'
import variables from '@/styles/variables.scss'
import printJS from 'print-js'
import logo from '@/assets/image/logo.png'
export default {
  name: 'index',
  data(){
    return {
      Logo: logo,
    }
  },
  computed:{
    variables(){
      return variables
    },
    tableData(){
      var data = JSON.parse(JSON.stringify(editTableData))
      data = data.map(item =>{
        return {
          ...item,
          state: item.state == 1 ? '已开启' : '未开启'
        }
      })
      return data
    },
  },
  methods: {
    // 打印类型
    printType(type){
      switch (type){
        case 'onePicture':
          printJS({
            type: 'image',
            printable: [logo],
            documentTitle: '打印图片',
          })
          break
        case 'allPicture':
          printJS({
            type: 'html',
            printable: 'imgPrint',
            documentTitle: '打印图片',
          })
          break
        case 'json':
          printJS({
            type: 'json',
            documentTitle: '打印表格',
            printable: this.tableData,
            // 打印json时传入的表头名称(必传)，要和json中的键值对的键保持一致
            properties: [
              { field: 'title', displayName: '活动' },
              { field: 'decs', displayName: '描述' },
              { field: 'state', displayName: '状态' },
              { field: 'created_at', displayName: '活动日期' },
            ],
            // 打印JSON时，表格的自定义样式
            gridStyle: 'text-align: left;border: 1px solid lightgray;font-size: 12px; line-height: 26px;',
            gridHeaderStyle: 'font-weight: 500; border: 1px solid lightgray; line-height: 30px;',
          })
          break
        case 'html':
          printJS({
            type: 'html',
            printable: 'allPage',
            documentTitle: '打印html页面',
            // 写入自定义样式
            style: `
            th, td{ text-align: left; border: 1px solid lightgray; font-size: 12px; padding: 0 10px;}
            .el-button{ border: 1px solid #62afe3; margin-right: 20px;}
            .img-container{ margin: 20px 0;}
            .config-container{ padding-top: 30px;}
            .config-title{ margin-bottom: 10px;}
            .problem{ margin-top: 100px; border-left: 10px solid #42b983;  background: #f5f7fa; padding: 20px;}
            `
          })
          break
      }
    }
  }
}
</script>

editTableData的值

export const editTableData = [
  {
    id: 202304061,
    title: '学习vue框架基础知识',
    readonly: '学习vue框架基础知识',
    decs: '易学易用，性能出色，适用场景丰富的Web前端框架',
    state: 1,
    created_at: '2023-04-06',
    update_at: '2023-04-10',
    edit: false,
  },
  {
    id: 202304062,
    title: '深入学习vue-router',
    readonly: '深入学习vue-router',
    decs: '为 Vue.js 提供富有表现力、可配置的、方便的路由',
    state: 1,
    created_at: '2023-04-07',
    update_at: '2023-04-11',
    edit: false,
  },
  {
    id: 202304063,
    title: '学习vue-cli快速搭建框架',
    readonly: '学习vue-cli快速搭建框架',
    decs: 'Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统',
    state: -1,
    created_at: '2023-04-12',
    update_at: '2023-04-18',
    edit: true,
  },
  {
    id: 202304064,
    title: '深入学习vue框架相关内容',
    readonly: '深入学习vue框架相关内容',
    decs: '关于框架搭建，开发，部署',
    state: -1,
    created_at: '2023-04-14',
    update_at: '2023-04-21',
    edit: true,
  }
]

配置参数说明： 

• printable

PDF或图像：URL地址; HTML：元素id; JSON：数组。

•  properties

打印JSON时传入的表头名称，要和JSON中的键值对的键保持一致。

• gridStyle

打印JSON时，表格的自定义样式。

• gridHeaderStyle

打印JSON时，表头的自定义样式。

• style

传入自定义样式的字符串，作用于被打印的HTML标签上。自定义页面上所有元素的样式，在打印时生效。

• 效果图

I. 只打印图片

II. 打印表格

 III. 打印整个页面

打印时发现表格显示不全，需手动调整打印设置，在右边的更多设置-缩放，选择自定义，缩放至合适的大小。 

• print.js配置参数