vue处理冰淇淋账单打印时样式不生效/vue使用printJS打印时样式不生效

因为打印时出现样式缺失的问题,这里记一下方便日后出现相同问题再过来参考

1、vue打印时样式不生效,可以用@media print来专门设置打印时的效果

甚至可以用!important; 来强调从而确保打印时效果优先级

2、检查其他样式冲突: 确保没有其他样式在打印时覆盖了 .left-signature 的样式。可以通过浏览器的开发者工具(F12)查看打印预览时的实际样式应用情况。
3、确保元素可见: 检查是否有其他 CSS 规则(例如 display: none 或 visibility: hidden)在打印时隐藏了该元素。

4、如果使用的打印控件是printJS,就有意思了,因为PrintJS 是一个用于在客户端(浏览器)中打印文档的 JavaScript 库。处理简单的 HTML 内容可以搞,但是它不能直接处理表格的 colspan 和 rowspan 属性,因为它主要是用来打印预先渲染好的静态内容,并且各种样式也不会去style里面读取,

所以这里如果想printJS打印页面的样式也生效,就需要换一种方法

通过查资料看到别人是这么写的,我也把冰淇淋账单这么处理:

我这里可以在创建printJS的时候就把style设置进去,把样式以反斜杠`包裹起来

  printJS({
    printable: 'main-div',
    type: 'html',
    popTitle: "xxxxxxx冰淇淋出单管理系统",
    style: `table{width: 95%;。。。。。。等样式都写到这里}`,
    scanStyles: true,
  })

然后记得页面修改效果了,这个里面也要同步修改样式,保持一致,这样,样式就可以也带到冰淇淋账单打印页面去了

printPrescription(){ if (!this.patientInfoRow) { this.$message.error('未选择数据') return } let filterArr = this.medicalEditTabs.filter((item) => item.content.recipelInfo.status != -1 && item.content.recipelInfo.name !== '挂号费') if(filterArr.length == 0){ this.$message.error('当前患者并无配药信息') return } let arr = [] for (let i = 0; i < filterArr.length; i++) { arr.push('') } filterArr.forEach(async (item, index) => { let params = { recipelInfoId: item.content.recipelInfo.id, type: item.content.recipelInfo.recipelType.value } let str = '' let type = params.type == 'recipelType_0' ? // "westMedicine" : 'chronicDisease' : params.type == 'recipelType_1' ? 'chineseMedicine' : params.type == 'recipelType_2' ? 'infuse' : 'costItem' if (params.recipelInfoId) { str = '&recipelInfoId=' + params.recipelInfoId } let printUrl = this.BASE_API + '/ureport/preview?_u=Newtouch:' + type + '.ureport.xml&_t=0' + str + '&type=0' // 使用axios发送请求获取数据 const response = await axios.get(printUrl) const dataToPrint = response.data // 使用print-js打印数据 printJS({ printable: dataToPrint, type: 'raw-html', style: '' }) }) }, // 配药单打印功能 printDispensing(){ if (!this.patientInfoRow) { this.$message.error('未选择数据') return } let filterArr = this.medicalEditTabs.filter((item) => item.content.recipelInfo.status != -1 && item.content.recipelInfo.name !== '挂号费') if(filterArr.length == 0){ this.$message.error('当前患者并无处方信息') return } // let arr = [] // for (let i = 0; i < filterArr.length; i++) { // arr.push('') // } filterArr.forEach(async (item, index) => { let params = { recipelInfoId: item.content.recipelInfo.id, type: item.content.recipelInfo.recipelType.value } let str = '' // let type = // params.type == 'recipelType_0' // ? // "westMedicine" : // 'chronicDisease' // : params.type == 'recipelType_1' // ? 'chineseMedicine' // : params.type == 'recipelType_2' // ? 'infuse' // : 'costItem' if (params.recipelInfoId) { str = '&recipelInfoId=' + params.recipelInfoId } let printUrl = this.BASE_API + '/ureport/preview?_u=Newtouch:' + 'prescription' + '.ureport.xml&_t=0' + str + '&type=0' // 使用axios发送请求获取数据 const response = await axios.get(printUrl) const dataToPrint = response.data // 使用print-js打印数据 printJS({ printable: dataToPrint, type: 'raw-html', style: '' }) }) }这是一段用来打印处方单的打印方法使用的print-js,目前遇到,处方单有9个,但是在谷歌浏览器上只是打印出两个,其他的都有通过后端返回的json,但是没有执行打印
最新发布
07-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值