vue打印表格

最新推荐文章于 2025-02-21 16:40:04 发布

江愁

最新推荐文章于 2025-02-21 16:40:04 发布

阅读量2.1k

点赞数

分类专栏： printJS 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_44089649/article/details/113891367

版权

printJS 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中结合print-js库，实现表格内容的打印功能。首先通过npm安装print-js，然后在相关页面导入并使用printJS模块。接着，创建一个打印按钮，并定义打印表格的方法。最后，展示了操作成功后的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、npm 下载 npm install print-js

2、在需要的页面使用

import printJS from ‘print-js’

在这里插入图片描述

3、写一个按钮

<!-- 点击按钮进行打印 -->
<el-button type="primary" icon="el-icon-printer" @click="printTable">
    打印
</el-button>

4、打印表格的方法

printTable(){//打印表格
	 //通过getdata调用后台接口获取全部数据封装到res
	 axios({
	     url:'/apis/cost/getData',
	     methods: "GET",
	     params:{
	         "tId":this.tId
	     }
	 }).then(response => {
	     const res = response.data;
	     let data = [];
	     for(let i = 0; i<res.length; i++){
	         data.push({
	             field1:i+1,
	             field2:res[i].comment,
	             field3:res[i].designator,
	             field4:res[i].footprint,
	             field5:res[i].quantity,
	             field6:res[i].inventoryCount,
	             field7:res[i].cUnit,
	             field8:res[i].cTotal
	         })
	     }
	     console.log("data=",data);
	     printJS({
	         printable:data,
	         properties:[{
	             field:'field1',
	             displayName:'序号',
	             columnSize:1
	         },{
	             field:'field2',
	             displayName:'物料名称',
	             columnSize:1
	         },{
	             field:'field3',
	             displayName:'方位',
	             columnSize:1
	         },{
	             field:'field4',
	             displayName:'覆盖范围',
	             columnSize:1
	         },{
	             field:'field5',
	             displayName:'数量',
	             columnSize:1
	         },{
	             field:'field6',
	             displayName:'库存数量',
	             columnSize:1
	         },{
	             field:'field7',
	             displayName:'单价/元',
	             columnSize:1
	         },{
	             field:'field8',
	             displayName:'合计/元',
	             columnSize:1
	         }],
	         type:'json',
	         header:'C001',
	         //样式设置
	         gridStyle:'border:2px solid #3971A5;',
	         gridHeaderStyle:'color:red; border:2px solid #3971A5;'
	     })
	
	 }).catch(function (error) { // 请求失败处理
	     console.log(error);
	 });
}

5、效果图：

在这里插入图片描述