记录一下vue-print-nb 遇到的坑

最新推荐文章于 2024-04-28 10:42:55 发布
最新推荐文章于 2024-04-28 10:42:55 发布
阅读量650 收藏 8
点赞数 9
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014028247/article/details/135827126
版权

问题是这样的：

用户有个在线打印表格的需求，用了vue-print-nb插件，起初 表格内字体都是未加粗的，打印所见即所得没什么问题

后来用户要求字段名加粗，遂在css追加 font-weight: bold; 打印预览加粗 一切正常，当打印出后，发现A4纸左上角出现了缩小版的加粗字段（谷歌浏览器打印有问题，火狐没问题）

网上搜了很多相关打印兼容性问题，没有找到合适的办法

后来想能不能不用font-weight: bold; 进行字体加粗，遂将加粗改成了阴影：text-shadow: 0 0 1px black;  果然阴影的没有再打印出来，还好阴影可以以假乱真，不仔细看真看不出来。

子文长弓
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-print-nb 兼容低版本浏览器
11-28
在开发过程中，我们经常需要处理各种打印需求，这正是 `vue-print-nb` 插件的作用所在。`vue-print-nb` 是一个针对 Vue.js 应用程序设计的打印插件，它允许开发者方便地实现页面或组件的打印功能。标题提到的“vue-...
vue-print-nb:Vue插件，打印！ 好的！
05-12
vue-print-nb 这是用于包装，简单，快速，方便，轻便的指令包装纸。 安装 Vue2版本： npm install vue-print-nb --save import Print from 'vue-print-nb' // Global instruction Vue . use ( Print ) ; //or // ...
vue 使用vue-print-nb 实现打印功能 和 用针式打印机打印模糊问题
shencailing的博客
12-28 4388
这里写目录标题一、vue-print-nb 实现打印功能1、安装2、在main.js 中引入3、在vue页面中的使用4、打印分页 `style="page-break-after: always"`二、网页 用针式打印机打印模糊问题 一、vue-print-nb 实现打印功能 1、安装 cnpm i vue-print-nb -S 2、在main.js 中引入 import Print from 'vue-print-nb' Vue.use(Print) 3、在vue页面中的使用 <template&
vue-print-nb 打印功能总结
qq_21460133的博客
03-16 3975
打印方法总结
vue-print-nb插件来实现打印功能——打印布局及尺寸处理
最新发布
yehaocheng520的博客
04-28 1140
vue-print-nb插件来实现打印功能——打印布局及尺寸处理
vue3 打印功能，踩坑记录
灯火的博客
08-14 1682
也可以结合html2Canvas使用，但博主说有bug。windows上面打印预览没有任何问题，但是在Mac上面所有的字体间距均被放大，于是没有使用该方法。当我进入node_modules找到 vue3-print-nb 时发现文件目录和模块都变了…当我进入node_modules找到 print-js 时发现文件目录和模块都变了…查看配置项后发现可以使用maxWidth进行调整，于是解决了表格字段残缺的问题。实际使用时表格打印不全，直接漏了几个字段；实际使用时表格打印不全，直接漏了几个字段；
vue-print-nb打印问题总结
热门推荐
q1424966670的博客
08-18 2万+
1、如果打印出来，表格的列缺失 原因：table-layout: fixed导致的 让表table布局更加符合预期，普通使用table时，其table-layout默认值是auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。而使用： table { table-layout: fixed; } 则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题，第二行以后是数据行，也就是让数据行的每列宽度向第一行列宽度看齐。...
vue-print-nb 实现打印功能 (兼容低版本谷歌浏览器)
qq_43209807的博客
11-28 1547
下面是在谷歌47版本打印预览： 2.Vue3.0版本： 使用方法： HTML: JavaScript: 兼容低版本浏览器 原因：在printarea.js文件中print(iframe)方法中在iframe加载完，就执行iframewin.print()打印。在高版本的浏览器中在执行iframe.print()后等待手动操作打印窗口后在执行isRemove()等后面的方法。而低版本浏览器中iframe.print()后立马执行isRemve()等，所以打印无效，不弹出打印窗口。修改源码：
vue-print-nb 基本使用
成长笔记
10-12 1935
vue-print-nb 打印插件使用，以及注意事项
vue-print-nb-z
05-06
light.InstallNPMnpm install vue-print-nb-z --saveimport Print from 'vue-print-nb'// Global instruction Vue.use(Print);//or// Local instructionimport print from 'vue-print-nb'directives:
vue-print:基于vue-print-nb打印组件做的功能拓展
05-07
vue-print基于vue-print-nb打印组件的拓展功能,下载后放在项目中引用详情请看博客介绍Installmain.js文件引用import Print from './xxxx/vue-print-nb/src'Vue.use(Print);
vue3使用print-template生成pdfDemo
08-18
在这个"vue3使用print-template生成pdfDemo"项目中，开发者利用Vue3的特性构建了一个示例，展示了如何将网页内容转化为PDF文档。这个过程通常涉及到前端渲染和第三方库的使用。 首先，我们看到`index.html`是项目的...
vue print 解决针式打印机打印失败不清晰的问题
weixin_43866627的博客
12-23 1507
vue print 解决针式打印机打印失败不清晰的问题
vue2 vue3 打印插件 vue-print-nb
zihong2019的博客
06-08 5844
vue2 vue3 打印插件 vue-print-nb 目录:vue2 vue3 打印插件 `vue-print-nb`兼容性：Firefox 、Chrome都兼容，文档说还兼容IE版本：vue2、vue3都兼容地址([npm](https://www.npmjs.com/package/vue-print-nb))基本使用 兼容性：Firefox 、Chrome都兼容，文档说还兼容IE 版本：vue2、vue3都兼容 地址(npm) 基本使用 下载安装、注册为全局组件 npm install vue
vue打印兼容xp32位系统/vue的打印功能
qq_38143787的博客
08-11 609
文章目录一、vue-print-nb二、vuePlugs_printjs 一、vue-print-nb 这个插件很好用，也很简单，但是问题就是不兼容xp32位。 官方安装及使用文档 1.安装 npm install vue-print-nb --save 2.main.js中全局引入 import Print from 'vue-print-nb' Vue.use(Print); 3.使用id <div id="printMe" > <p>打印内容</p>
vue + vue-print-nb 实现pc端打印功能，包含vue2和vue3两种引用方式
qq_42386231的博客
09-02 6459
参考vue-print-nb官方文档（https://github.com/Power-kxLee/vue-print-nb#print-preview） （一）、引入方法 vue2 1）、安装 npm install vue-print-nb --save 2）、main.js引入 import Print from 'vue-print-nb' Vue.use(Print); vue3 1）、安装 npm install vue3-print-nb --save 2）、main.js 引入 i
vue 针试打印机实现
黄孝果的博客
09-20 4080
Vue 针试打印机实现
vue篇
liuliuliu_666的博客
07-30 439
nextTick https://juejin.im/post/5ae3f0956fb9a07ac90cf43e https://juejin.im/post/5be692936fb9a049e129b741 非常棒 Vue.js在默认情况下，每次触发某个数据的 setter 方法后，对应的 Watcher 对象其实会被 push 进一个队列 queue 中，在下一个 tick 的时候将这个队列 queue 全部拿出来 run一遍。 this.$nextTick也为事件队列push进入了新的一个callb
vue中打印插件vue-print-nb(二)-实例之两种方法——安包之设置一个id和绑定一个对象 & 下载print.js之ref设置锚点
weixin_44867717的博客
12-03 1542
打印
vue-print-nb遇到的坑
08-02
回答: 在使用vue-print-nb时，你可能会遇到一些问题。其中一些常见的问题包括： 1. 安装问题：在安装vue-print-nb时，你需要根据你的Vue版本选择正确的安装方法。对于Vue2.0版本，你可以使用npm install vue-print-nb --save进行安装，而对于Vue3.0版本，你可以使用npm install vue3-print-nb --save进行安装。[3] 2. 引入问题：在引入vue-print-nb到你的Vue项目时，你可以选择全局挂载或自定义指令的方式。如果你选择全局挂载，你可以使用import Print from 'vue-print-nb'和Vue.use(Print)进行全局挂载。如果你选择自定义指令，你可以使用import print from 'vue-print-nb'和directives: { print }进行引入。[2] 3. 使用问题：在使用vue-print-nb时，你可能需要查看官方文档或示例代码来了解其基本用法。你可以参考vue-print-nb的文档或示例代码来了解如何打印条形码以及其他功能的使用方法。[1] 希望这些信息对你有帮助！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值