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

用js在控制台打印html页面,vue 使用print-js 打印html页面Print.js官网官网优点:可以打印多种格式的内容(pdf、json、html等)打印json时可以添加表头。打印html页时可以继承原有页面的样式,局部打印,过滤掉要打印的元素,及其方便。一、vue安装命令:npminstallprint-js–save二、引入这个引入不需要在main.js中,直接在使用的.vue中引入即可这里颜色虽然是灰色,但是也要添加,否则会报错。三、编码我这里…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

Print.js 官网

官网

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

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

一、vue安装命令:

npm install print-js –save

二、引入

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

055fa0048ba92374aa8b656c223b26e5.png

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

三、编码

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

dbe9bb1746bbb8e7020c8e0bf98cdc4a.png

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/179446.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • SHFileOperation使用

    SHFileOperation使用总结一下SHFileOperation的用法,希望对大家有用//删除文件或者文件夹boolDeleteFile(char*lpszPath){SHFILEOPSTRUCTFileOp={0};FileOp.fFlags=FOF_ALLOWUNDO|//允许放回回收站FOF_NOCONFIRMATION;//不出现确认对话框…

  • Oracle数据库备份与恢复方案

    Oracle数据库备份与恢复方案任何数据库在长期使用过程中,都会存在安全隐患。对于数据库管理员来说不能仅寄希望于计算机操作系统的安全运行,而是要建立一整套的数据库备份与恢复机制。当任何人为的或是自然的灾难一旦出现,而导致数据库崩溃、物理介质损坏等,就可以及时恢复系统中重要的数据,不影响整个单位业务的运作。然而如果没有可靠的备份数据和恢复机制,就会带来系统瘫痪、工作停滞、经济损失等等不堪设想的后果。本文以ORACLE数据库为例,结

  • jupyter如何运行代码_python jupyter notebook安装

    jupyter如何运行代码_python jupyter notebook安装python-mpipinstall–upgradepippython3-mpipinstall–upgradepip

  • pycharm绘制图形_pycharm安装后无解释器

    pycharm绘制图形_pycharm安装后无解释器importnumpyasnpimportmatplotlib.pyplotaspltdefmain():#线的绘制x=np.linspace(-np.pi,np.pi,256,endpoint=True)c,s=np.cos(x),np.sin(x)#绘制plt.figure(1)#自变量…

  • Android studio断点调试

    Android studio断点调试有人说Android的调试是最坑的,那我只能说是你不会用而已,我可以说AndroidStudio的调试是我见过最棒的。下面会将debug模式和Attach模式的断点调试好了开始写一个简单的调试程序,我们先来一个for循环设置断点(点击红点位置添加或取消断点)点击debug模式运行查看调试面板一、简单调试1.stepover:…

  • saxreader java_SAXReader saxReader = new SAXReader();来解析xml文件

    saxreader java_SAXReader saxReader = new SAXReader();来解析xml文件使用SAXReader需要导入dom4j-full.jar包。dom4j是一个Java的XMLAPI,类似于jdom,用来读写XML文件的。dom4j是一个非常非常优秀的JavaXMLAPI,具有性能优异、功能强大和极端易用使用的特点,同时它也是一个开放源代码的软件,可以在SourceForge上找到它。/***解析XML文件,生成List*@paramfilePath–xm…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号