Vue使用两种方式打印页面数据

1. 使用 vue-print-nb 插件

1.1 安装 vue-print-nb

npm install vue-print-nb --save

1.2 在main.js中引入

import Print from 'vue-print-nb'
Vue.use(Print)

1.3 打印按钮绑定 handlePrint

<el-button v-print="handlePrint">打印</el-button>

1.4 在数据data中添加

data() {
    return {
      handlePrint: {
        id: 'print',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,打印表格数据<style>#print {width: 100%;}<style>',
        popTitle: "页眉部分",
    },
}

1.5 被打印的表格，添加id对应上个步骤的id

<el-table id="print" v-loading="loading" :data="CustomerSourceList" stripe border>
    <el-table-column v-if="showColumn('name')" label="名称" align="center" prop="name"/>
    <el-table-column v-if="showColumn('sort')" label="排序" align="center" prop="sort" width="200" sortable/>
    <el-table-column v-if="showColumn('createTime')" label="创建时间" align="center" prop="createTime" width="300" sortable/>
</el-table>

1.6 打印不全，添加样式

<style media="print">
  @media print {
    @page{
      size:  auto;
      margin: 8mm 6mm;
    }
    html {
      /*打印缩放，防止显示不全*/
      zoom: 90%;
    }
    #print table {
      table-layout: auto !important;
    }
    #print .el-table__header-wrapper .el-table__header {
      width: 100% !important;
    }
    #print .el-table__body-wrapper .el-table__body {
      width: 100% !important;
    }
    .el-table--border .el-table__cell, .el-table__body-wrapper td {
      border: solid 1px #f2f2f2;
    }
    td.el-table__cell{
      border: solid 1px #f2f2f2;
    }
  }
</style>

1.7 打印效果展示（选择背影图形表格就会显示背影）

1.8 打印参数配置说明

参数	作用	类型	可选项	默认值
id	局部打印有效，标识符	string	-	‘printId’
standard	局部打印有效，打印的文本类型	string	HTML5/loose/strict	html5
extraHead	局部打印有效，添加在打印区域的最顶端	string	-	-
extraCss	局部打印有效，为打印区域提供Stylesheet样式表	string	-	-
popTitle	局部打印有效，编辑页眉的标题	string	-	Document Title
clickMounted	全局有效，调用v-print绑定的按钮点击事件callback	Function	-	this.Object
openCallback	全局有效，调用打印时的callback	Function	-	this.Object
closeCallback	全局有效，调用关闭打印的callback(无法区分确认or取消)	Function	-	this.Object
beforeOpenCallback	全局有效，调用开始打印之前的callback	Function	-	this.Object
preview	全局有效，控制打印预览	Boolean	true/false	false
previewTitle	编辑预览页面的预览标题	string	-	'打印预览'
previewPrintBtnLabel	编辑预览页面的打印按钮文本	string	-	'打印'
previewBeforeOpenCallback	调用打开预览页面之前的callback	Function	-	this.Object
previewOpenCallback	调用打开预览页面之后的callback	Function	-	this.Object
url	非局部打印有效，异步加载打印指定的URL，确保同源策略相同	string	-	-
asyncUrl	非局部打印有效，异步加载打印指定的URL，确保同源策略相同	Function	-	-
zIndex	预览有效，预览窗口的z-index,默认是20002，最好比默认值更高	string,Number	-	20002

 

2. 使用 print-js 插件

2.1 安装 vue-print-nb

npm install print-js --save

2.2 在需要打印的页面中引入

import printJS from 'print-js'

2.3 打印按钮绑定 handlePrint 事件

<el-button @click="handlePrint">打印</el-button>

2.4 添加打印事件

/** 打印按钮操作 */
handlePrint() {
    let data = []
    // list为要打印的数据
    for (let i=0; i < this.list.length; i++) {
        data.push({
            field1: this.list[i].name,
            field2: this.list[i].sort,
            field3: this.list[i].createTime,
        })
    }
    printJS({
        type: 'json',
        header: '打印表格数据',
        headerStyle: 'text-align: center',
        // 打印的数据
        printable: data,
        // 表头名称(必传)，要和json中的键值对的键保持一致
        properties: [
            {field: 'field1', displayName: '名称', columnSize: 1},
            {field: 'field2', displayName: '排序', columnSize: 1},
            {field: 'field3', displayName: '创建时间', columnSize: 1}
        ],
        // 表头的自定义样式设置
        gridHeaderStyle: 'font-weight: 500; border: 1px solid lightgray; font-size: 18px; line-height: 32px;',
        // 表格的自定义样式设置
        gridStyle: 'text-align: center; border: 1px solid lightgray; font-size: 15px; line-height: 30px;',
    })
}

 2.5 打印效果展示

 2.6 PringJS参数配置说明

参数	默认值	说明
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	null	这允许我们传递一个或多个css文件URL，这些URL应该应用于正在打印的html。值可以是具有单个URL的字符串，也可以是具有多个URL的数组。
style	null	这允许我们传递一个带有自定义样式的字符串，该字符串应应用于正在打印的html。
scanStyles	true	设置为false时，库将不会处理应用于正在打印的html的样式。使用css参数时很有用。
targetStyle	null	默认情况下，在打印HTML元素时，库仅处理某些样式。此选项允许您传递要处理的样式数组。例如：[‘pading-top’，‘border-bottom’]
targetStyles	null	不过，与“targetStyle”相同，它将处理任意范围的样式。例如：[‘border’，‘padding’]，将包括“border-bottom”、“bordertop”、“border-left”、“porder-refght”、“padding-top”等。您还可以传递[‘*’]来处理所有样式。
ignoreElements	[ ]	接受打印父html元素时应忽略的html ID数组。
properties	null	打印JSON时使用。这些是对象属性名称。
gridHeaderStyle	‘font-weight: bold;’	打印JSON数据时网格头的可选样式。
gridStyle	‘border: 1px solid lightgray; margin-bottom: -1px;’	打印JSON数据时网格行的可选样式。
repeatTableHeader	true	打印JSON数据时使用。设置为false时，数据表标题将仅显示在第一页。
showModal	null	启用此选项可在检索或处理大型PDF文件时显示用户反馈。
modalMessage	‘Retrieving Document…’	showModal设置为true时向用户显示的消息。
onLoadingStart	null	加载PDF时要执行的函数
onLoadingEnd	null	加载PDF后要执行的函数
documentTitle	‘Document’	打印html、image或json时，这将显示为文档标题。
fallbackPrintable	null	打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档，而不是传递给“可打印”的原始文档。如果在备用pdf文件中注入javascript，这可能会很有用。
onPdfOpen	null	打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。可以在此处传递回调函数，当发生这种情况时将执行回调函数。在某些需要处理打印流、更新用户界面等的情况下，它可能很有用。
onPrintDialogClose	null	浏览器打印对话框关闭后执行的回调函数。
onError	error => throw error	发生错误时要执行的回调函数。
base64	false	打印作为base64数据传递的PDF文档时使用。
honorMarginPadding(弃用)	true	这用于保留或删除正在打印的元素的填充和边距。有时这些样式设置在屏幕上很好，但在打印时看起来很糟糕。您可以通过将其设置为false来删除它。
honorColor(弃用)	false	要彩色打印文本，请将此属性设置为true。默认情况下，所有文本将以黑色打印。
font(弃用)	‘TimesNewRoman’	打印HTML或JSON时使用的字体。
font_size(弃用)	‘12pt’	打印HTML或JSON时使用的字体大小。
imageStyle(弃用)	‘width:100%;’	打印图像时使用。接受包含要应用于每个图像的自定义样式的字符串。