用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，使其不打印。非常好用

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

网页打印非常优秀的插件 Print.js
前言:最近需要在网页上打印,网上找了很多,刚开始使用的 lodop打印插件来打印,没有达到理想的要求,它需要下载.区分浏览器的位数来安装.在vue使用时候必须写成内部样式,在笔记本样式失效等问题,使我 ...
vue使用print.js打印插件
任务:解决vue页面局部打印功能 print.js插件,可以打印 html.pdf.json数据官网:https://printjs.crabbly.com/ 一个整理的很好的讲解:https:// ...
vue使用print.js实现打印功能，以及添加打印机
print.js 一个javascript库,可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 官网地址 https:// ...
html中如何引入vue,vue.js怎样引入到HTML中,vue引入第三方js库
vue.js怎样引入到HTML中如何将vue.js引入HTML,把vue.js引入HTML的方法:一.下载vue . js:然后在HTML中添加vue.js包,其语法为"script src ...
Vue使用print.js连续打印多页A4表单
父组件 <el-dialog :visible.sync="printDialog" class="printDialog"><div ref ...
vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法定义-print.js // 打印类属性.方法定义 /* eslint-di ...
Vue使用Print插件实现页面打印功能/打印列表
Vue使用Print插件实现页面打印示例官网地址可以下载最新版官网下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...
ie8 html js页面打印预览,Print.js javascript库实现页面打印
您可以从GitHub版本下载最新版本的Print.js npm 安装 npm install print-js --save npm安装时将库导入项目 import print from 'print ...
vue项目实现前端打印功能
一.直接使用window自带的打印功能: window.print() <template><div><p>点击下面的按钮,可将div里的内容区域进行打印</ ...
前端使用print.js实现打印
前言项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容.下面的内容基于vue. 如果需要用到前端生成二维码可以看我的这篇文章:在vue项目中使用q ...

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

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

最新文章

热门文章