位置: IT常识 - 正文

vue+element-ui前端使用print-js实现打印,可自定义样式(横纵向,缩放比,字体大小,背景色)(前端 vue)

编辑:rootadmin
vue+element-ui前端使用print-js实现打印,可自定义样式(横纵向,缩放比,字体大小,背景色) vue+element-ui前端使用print-js实现打印下载依赖使用print-js实现打印功能需要打印的内容按钮调用打印函数打印函数设置默认打印横纵向(IE不生效)设置默认打印缩放比调整打印字体大小自定义字体大小生效自定义背景颜色生效参数

推荐整理分享vue+element-ui前端使用print-js实现打印,可自定义样式(横纵向,缩放比,字体大小,背景色)(前端 vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vueelementui前端框架,vue前端菜鸟教程,element前端框架,element前端框架,前端element ui,前端element ui,vueelementui前端框架,element 前端,内容如对您有帮助,希望把文章链接给更多的朋友!

print-js官网链接: https://printjs.crabbly.com/

下载依赖npm install print-js --save

在package.json文件中增加print-js依赖。

"dependencies": { "axios": "^0.19.2", "babel-polyfill": "^6.26.0", "element-ui": "^2.15.6", "file-saver": "^2.0.5", "pinyin-match": "^1.2.2", "print-js": "^1.6.0", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^3.1.2", "xlsx": "^0.17.0", "xlsx-style": "^0.8.13" },

使用print-js

在需要打印的页面对应文件中引入print-js

import printJS from 'print-js'实现打印功能需要打印的内容

需要把表格打印出来,在表格外套一个div,并给一个id值。

<div class="data-card" id="mytable1"> <el-table size="mini" :key="num" id="mytable" :header-cell-style="tableHeaderColor" :span-method="arraySpanMethod" :cell-style="cellStyle" ref="table" :data="tableDataDetail" border stripe style="width: 100%"> <el-table-column align="center" :label="title"> </el-table-column> </el-table> </div>按钮调用打印函数vue+element-ui前端使用print-js实现打印,可自定义样式(横纵向,缩放比,字体大小,背景色)(前端 vue)

定义一个按钮,点击调用打印函数。

<el-button @click="handleDownload()">下载</el-button>打印函数

不同浏览器打印样式不同,使用navigator.userAgent进行了判断。 printJS是引用的print-js对象 printtable为标签元素id type有html,json,pdf等。 header是用于HTML、图像或JSON打印的可选标题。它将被放置在页面的顶部。此属性将接受文本或原始HTML。 style为自定义的样式

handlePrint () { let userAgent = navigator.userAgent; //判断是否Firefox浏览器 if (userAgent.indexOf("Firefox") > -1) { console.log('Firefox') printJS({ printable: 'mytable1', // 标签元素id type: 'html', header: '', style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;} thead th { border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; } tbody td { border: 1px solid #000; } tbody { text-align: center; } table { border-collapse: collapse; }`, }); } //判断是否chorme浏览器 if (userAgent.indexOf("Chrome") > -1){ console.log('Chrome') printJS({ printable: 'mytable1', // 标签元素id type: 'html', header: '', documentTitle: '', style: `@page {size:auto;margin-top:100px; margin-left:5px; margin-right: 15px;} thead th { border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; } tbody td { border: 1px solid #000; } tbody { text-align: center; } table { border-collapse: collapse; }`, }); } //判断是否IE浏览器 if (!!window.ActiveXObject || "ActiveXObject" in window) { console.log('IE') printJS({ printable: 'mytable1', // 标签元素id type: 'html', header: '', style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;} thead th { border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; } tbody td { border: 1px solid #000; } tbody { text-align: center; } table { border-collapse: collapse; }`, }); } },设置默认打印横纵向(IE不生效)

打印横向:@media print{@page {size:landscape}} 打印纵向:@media print{@page {size:portrait}} 加在style里

设置默认打印缩放比

在style中加入body {zoom: 50%;} zoom中写需要的缩放比。

调整打印字体大小

修改print-js文件

修改font_size数值(小于一定数值之后chrome浏览器内打印字体不会变小)

自定义字体大小生效

修改print-js文件 修改font-size生效在206行 将有font-size的匿掉,改成下面一行。

// elementStyle += 'max-width: ' + params.maxWidth + 'px !important; font-size: ' + params.font_size + ' !important;'; elementStyle += 'max-width: ' + params.maxWidth + 'px !important;';自定义背景颜色生效

Chrome & IE中加入这句话: -webkit-print-color-adjust: exact

.back1 { -webkit-print-color-adjust: exact; background-color:rgba(250,240,230,1) !important; }

火狐例子:

.back1 { background-color: unset; box-shadow: inset 0 0 0 1000px rgba(250,240,230,1) }

效果:

参数参数默认值说明printablenull文档源:pdf或图像url、html元素id或json数据对象。type‘pdf’可打印类型。可用的打印选项有:pdf、html、image、json和raw html。headernull用于HTML、图像或JSON打印的可选标题。它将被放置在页面顶部。此属性将接受文本或原始HTML。headerStyle‘font-weight: 300;’要应用于标题文本的可选标题样式。maxWidth800以像素为单位的最大文档宽度。根据需要更改此选项。打印HTML、图像或JSON时使用。cssnull这允许我们传递一个或多个css文件URL,这些URL应该应用于正在打印的html。值可以是具有单个URL的字符串,也可以是具有多个URL的数组。stylenull这允许我们传递一个带有自定义样式的字符串,该字符串应应用于正在打印的html。scanStylestrue设置为false时,库将不会处理应用于正在打印的html的样式。使用css参数时很有用。targetStylenull默认情况下,在打印HTML元素时,库仅处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘pading-top’,‘border-bottom’]targetStylesnull不过,与“targetStyle”相同,它将处理任意范围的样式。例如:[‘border’,‘padding’],将包括“border-bottom”、“bordertop”、“border-left”、“porder-refght”、“padding-top”等。您还可以传递[‘*’]来处理所有样式。ignoreElements[ ]接受打印父html元素时应忽略的html ID数组。propertiesnull打印JSON时使用。这些是对象属性名称。gridHeaderStyle‘font-weight: bold;’打印JSON数据时网格头的可选样式。gridStyle‘border: 1px solid lightgray; margin-bottom: -1px;’打印JSON数据时网格行的可选样式。repeatTableHeadertrue打印JSON数据时使用。设置为false时,数据表标题将仅显示在第一页。showModalnull启用此选项可在检索或处理大型PDF文件时显示用户反馈。modalMessage‘Retrieving Document…’showModal设置为true时向用户显示的消息。onLoadingStartnull加载PDF时要执行的函数onLoadingEndnull加载PDF后要执行的函数documentTitle‘Document’打印html、image或json时,这将显示为文档标题。fallbackPrintablenull打印pdf时,如果浏览器不兼容(检查浏览器兼容性表),库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档,而不是传递给“可打印”的原始文档。如果在备用pdf文件中注入javascript,这可能会很有用。onPdfOpennull打印pdf时,如果浏览器不兼容(检查浏览器兼容性表),库将在新选项卡中打开pdf。可以在此处传递回调函数,当发生这种情况时将执行回调函数。在某些需要处理打印流、更新用户界面等的情况下,它可能很有用。onPrintDialogClosenull浏览器打印对话框关闭后执行的回调函数。onErrorerror => throw error发生错误时要执行的回调函数。base64false打印作为base64数据传递的PDF文档时使用。honorMarginPadding(弃用)true这用于保留或删除正在打印的元素的填充和边距。有时这些样式设置在屏幕上很好,但在打印时看起来很糟糕。您可以通过将其设置为false来删除它。honorColor(弃用)false要彩色打印文本,请将此属性设置为true。默认情况下,所有文本将以黑色打印。font(弃用)‘TimesNewRoman’打印HTML或JSON时使用的字体。font_size(弃用)‘12pt’打印HTML或JSON时使用的字体大小。imageStyle(弃用)‘width:100%;’打印图像时使用。接受包含要应用于每个图像的自定义样式的字符串。
本文链接地址:https://www.jiuchutong.com/zhishi/277565.html 转载请保留说明!

上一篇:智能路由器与普通路由器有哪些区别(智能路由器哪个牌子好)

下一篇:公积金贷款额度是多少(公积金贷款额度查询计算器)

  • 腾讯微视可以直播吗(腾讯微视可以直播电影吗)

    腾讯微视可以直播吗(腾讯微视可以直播电影吗)

  • 华为nova5是三星屏吗(三星nova5i)

    华为nova5是三星屏吗(三星nova5i)

  • 华为nova5充电怎么没有显示的(华为nova5i充电)

    华为nova5充电怎么没有显示的(华为nova5i充电)

  • 多人编辑的文档怎么保存(多人编辑的文档怎么转换成文件)

    多人编辑的文档怎么保存(多人编辑的文档怎么转换成文件)

  • 小米9突然不能快充了(小米9突然不能快充了怎么办)

    小米9突然不能快充了(小米9突然不能快充了怎么办)

  • 荣耀magic Book14和magic Book15的区别(荣耀magicbook14和thinkbook14)

    荣耀magic Book14和magic Book15的区别(荣耀magicbook14和thinkbook14)

  • 控制幻灯片外观的方法有哪三种(控制幻灯片外观的方法有什么等多种)

    控制幻灯片外观的方法有哪三种(控制幻灯片外观的方法有什么等多种)

  • 华为recyclebinhw能删吗(华为recyclebinhw里面的文件能删吗)

    华为recyclebinhw能删吗(华为recyclebinhw里面的文件能删吗)

  • 不入耳的蓝牙耳机危害(不入耳的蓝牙耳机十大品牌)

    不入耳的蓝牙耳机危害(不入耳的蓝牙耳机十大品牌)

  • 手机放包里微信计步吗(手机放包里微信运动计步吗)

    手机放包里微信计步吗(手机放包里微信运动计步吗)

  • 微信没置顶为何被置顶(微信为什么没有顶置)

    微信没置顶为何被置顶(微信为什么没有顶置)

  • 微信发的信息删掉后还能找到么(微信发的信息删除了还能找回来吗)

    微信发的信息删掉后还能找到么(微信发的信息删除了还能找回来吗)

  • 为什么有些人的朋友圈不显示(为什么有些人的肚脐眼是竖着的)

    为什么有些人的朋友圈不显示(为什么有些人的肚脐眼是竖着的)

  • 抖音直播的赞有什么用(抖音直播赞有什么用)

    抖音直播的赞有什么用(抖音直播赞有什么用)

  • p40支持反向充电吗(p40支持反向充电怎么设置)

    p40支持反向充电吗(p40支持反向充电怎么设置)

  • 快手极速版邀请好友的钱多久到账(快手极速版邀请新人奖励审核多久)

    快手极速版邀请好友的钱多久到账(快手极速版邀请新人奖励审核多久)

  • 华为nova3i录不了屏(华为nova3录不了屏)

    华为nova3i录不了屏(华为nova3录不了屏)

  • 骁龙730g和765g对比(骁龙730g跟765g)

    骁龙730g和765g对比(骁龙730g跟765g)

  • 淘宝五张主图的分别作用(淘宝主图5张图分别怎么做)

    淘宝五张主图的分别作用(淘宝主图5张图分别怎么做)

  • 微信无法使用wifi(微信无法使用Wi-Fi数据迁移)

    微信无法使用wifi(微信无法使用Wi-Fi数据迁移)

  • 手机网速慢怎么解决(手机网速慢怎么解决华为)

    手机网速慢怎么解决(手机网速慢怎么解决华为)

  • 美版11pro支持双卡吗(美版11pro可以双卡双待吗)

    美版11pro支持双卡吗(美版11pro可以双卡双待吗)

  • 手机在线和4g在线怎么设置(手机在线和4g在一起)

    手机在线和4g在线怎么设置(手机在线和4g在一起)

  • 如何用微信写日记(如何在微信里写日记)

    如何用微信写日记(如何在微信里写日记)

  • 如何复制word中的一页(如何复制word中的表格)

    如何复制word中的一页(如何复制word中的表格)

  • 苹果可以设置主题吗(苹果可以设置主副卡铃声吗)

    苹果可以设置主题吗(苹果可以设置主副卡铃声吗)

  • 华为三大业务介绍(华为3大业务)

    华为三大业务介绍(华为3大业务)

  • 手机aris怎么退出(手机如何退)

    手机aris怎么退出(手机如何退)

  • oppo60倍变焦和华为50倍变焦(oppo reno60倍变焦)

    oppo60倍变焦和华为50倍变焦(oppo reno60倍变焦)

  • 帝国cms支持php吗(帝国cms什么语言)

    帝国cms支持php吗(帝国cms什么语言)

  • 城建税和教育费附加
  • 出口退税退的税是用进项税抵扣吗
  • 公司内部个人股份怎么算
  • 个税申报与社保申报一定是一致的么
  • 审计的基本流程是什么
  • 管理费0.5%每年
  • 小规模企业所得税多少
  • 应收账款和应付账款对冲会计分录
  • 房地产企业营销设施建造费包括哪些
  • 银行定期存款取钱需要本人吗
  • 管理人员工资计入管理费用吗
  • 什么叫记载资金的账簿
  • 出口退税对企业利润的影响
  • 企业为一般纳税人税率多少
  • 简易计税方法使用范围
  • 生产成本转入库存商品金额怎么算
  • 代购商品委托书怎么写
  • 门店里备用客户喝的茶叶怎么入账?
  • 安置房账务处理
  • 发票的校验码被公章覆盖了怎么办
  • 小规模纳税人如何计算增值税
  • 地铁充值发票能报销吗
  • 用人单位在职职工年平均工资怎么算
  • 小额贷款公司可以放贷吗
  • 如何填写企业所得税
  • 事业单位收到租金收入
  • 抵押房产的保险能退吗
  • windows怎么复制
  • 视同销售要做收入?
  • PHP:curl_multi_add_handle()的用法_cURL函数
  • 完工产品成本怎么算
  • 职工重大疾病保险包括哪些
  • 企业的做账流程有哪些
  • Yii使用技巧大汇总
  • 项目竣工决算审计与工程结算审核的区别是
  • javascript移动鼠标
  • unigui 小程序
  • 小微企业所得税税收优惠政策2023年
  • flex布局教程实例篇
  • 准确率精确率
  • pyqt5如何安装
  • 怎么才能学a1
  • 材料明细帐
  • 电子商业汇票业务
  • 受托支付转给个人账户需要交税吗为什么
  • 事业单位无形资产包括哪些
  • 安全生产责任险是强制险吗
  • strippped
  • python怎么用
  • 其他应收款增加现金流量表怎么填
  • 个人所得税税率怎么算
  • 党建经费提取是上年度还是下年
  • 存货在报表里是如何体现的
  • 小规模纳税人低于多少免征增值税
  • 房贷利息抵个税怎么申请
  • 补充协议有用吗
  • 应收账款应付账款借贷方都表示什么
  • 会计分录的记账要素
  • 小规模纳税人租赁不动产税率
  • 应交税费科目账务处理
  • 新旧收入准则对比区别表
  • 专用发票账目不对怎么办
  • centos vim编辑器
  • win8系统的电脑
  • 电脑关机没反应怎么办出现一个对话框
  • WIN10专业版怎么查看操作位数
  • win10系统怎么调整输入法
  • win8正版系统自带
  • Win10 Mobile 10586.29重要更新 可以玩wp7中的游戏
  • 快捷方式栏在哪
  • cocos2dx schedule
  • opengl绘图
  • python中myf
  • 用python写网页
  • jquery mobile
  • 查询同一网段下的其他ip
  • unity ulua
  • eclipse折叠代码块if else工具
  • 数据字典实例详解
  • python入坑指南
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设