vue项目中打印数据或表格（使用第三方依赖vue-printjs）

梦回小岛

已于 2022-03-19 08:59:43 修改

阅读量3.9k

点赞数 3

分类专栏：初级前端vue工作笔记文章标签： elementui vue.js javascript

于 2022-03-04 09:47:04 首次发布

本文链接：https://blog.csdn.net/zhengjingID/article/details/123269596

版权

本文介绍了如何在Vue项目中利用vue-printjs插件进行数据和表格的打印。首先从GitHub上获取vue-printjs资源包，然后进行安装和全局引入。接着在需要打印的组件中调用该插件，点击打印按钮后，通过打印预览界面调整设置。注意，若需打印多页，需要在main.js中找到vue-printjs的引用，并在print.js文件特定位置添加代码。

摘要由CSDN通过智能技术生成

第三方依赖vue-printjs（下面示例打印的是Html类型,该插件可以指定不打印的部分）

资源包网址：GitHub - xyl66/vuePlugs_printjs: vue打印插件

1.安装vue-printjs

npm i vue-printjs -S

2.全局引入vue-printjs

//该文件为main.js
import Print from 'vue-printjs'
Vue.use(Print)

3.在需要打印表格或数据的组件中使用

<template>
    <!-- 打印 -->
    <el-button
        size="mini"
        class="el-icon-printer"
        @click="printJson"
    ></el-button>
    <!-- 要打印的表格部分,定义属性ref='table' -->
    <el-table
        :data="list"
        border
        row-key="name"
        ref="table"
      >