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

梦回小岛

已于 2022-03-04 09:43:24 修改

阅读量3.6k

点赞数 3

分类专栏：初级前端vue工作笔记文章标签： css html javascript

于 2022-03-03 18:14:09 首次发布

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

版权

本文介绍了如何在Vue项目中利用第三方库print-js进行数据和表格的打印。首先，通过介绍print-js的功能特性，如支持HTML、图片和JSON数据的打印。接着，详细阐述了安装、全局引入和在组件中使用print-js的步骤。最后，提到了点击打印按钮后，用户可以在打印预览界面进行界面调整和打印操作。

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

一、第三方依赖print-js

（print-js插件可以打印Html、图片和Json数据类型，下面示例打印的是Json数据类型，其他类型可查看官方文档）

资源包文档网址：https://printjs.crabbly.com/

参数列表：

参数	默认值	说明
printable	null	文档源：pdf 或图像 url、html 元素 id 或 json 数据对象。
type	'pdf'	可打印类型。可用的打印选项包括：pdf，html，image，json和raw-html。
header	null	用于 HTML、图像或 JSON 打印的可选标头。它将放置在页面顶部。此属性将接受文本或原始 HTML。
headerStyle	'font-weight: 300;'	要应用于页眉文本的可选页眉样式。
maxWidth	800	最大文档宽度（以像素为单位）。根据需要更改此设置。在打印 HTML、图像或 JSON 时使用。
css<