用js在控制台打印html页面,vue 使用print-js 打印html页面

Print.js 官网

官网

优点：可以打印多种格式的内容(pdf、json、html等)

打印json时可以添加表头。打印html页时可以继承原有页面的样式，局部打印，过滤掉要打印的元素，及其方便。

一、vue安装命令：

npm install print-js –save

二、引入

这个引入不需要在main.js中，直接在使用的.vue中引入即可

这里颜色虽然是灰色，但是也要添加，否则会报错。

三、编码

我这里要打印 html 中的div ，调用函数找到 div 的 id。

methods: {

goPrint(){

console.log(‘打印’)

printJS({

printable: ‘printCons’,

type: ‘html’,

//properties: [

// { field: ‘name’, displayName: ‘姓名’, columnSize:`50%`},

// { field: ‘sex’, displayName: ‘性别’,columnSize:`50%`},

//],

// header: `

名单

`,

// style: ‘#printCons {width: 600px;} .no-print{width: 0px} .itemText1 { width: 200px } .itemText2 { width: 200px } .itemText3 { width: 200px } .itemText4 { width: 200px }’,

// gridHeaderStyle:’font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;’,

// gridStyle:’font-size:12px; padding:3px; border:1px solid; text-align:left;’,

// repeatTableHeader: true,

// scanStyles:true,

targetStyles: [‘*’],

ignoreElements:[‘no-print’,’bc’,’gb’]

})

}

}

printable:要打印的id。

type:可以是 html 、pdf、 json 等。

properties:是打印json时所需要的数据属性。

gridHeaderStyle和gridStyle都是打印json时可选的样式。

repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。

scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用。

targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。

style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。

ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用