@文心快码vue-print-nb不预览直接打印 文心快码 在使用 vue-print-nb 库时,如果你希望不预览直接打印,可以通过设置相关参数来实现。以下是如何在 Vue 项目中实现这一功能的步骤: 引入vue-print-nb 库并正确配置: 首先,你需要通过 npm 或 yarn 安装 vue-print-nb 库,并在你的 Vue 项目中注册它。 bash ...
1、安装vue-print-nb插件 npm install vue-print-nb --save 2、main.js中引用 import Print from 'vue-print-nb' Vue.use(Print) //注册 3、页面源码(复制粘贴即可) <template> 立即打印 <!-- 这句话很重要,如果通过display:none控制显隐会导致点击打印按钮生成空白--> <!--每一页的具体内容-...
vue-print-nb的原理大概是在你的页面上创建一个iframe,然后把你要打印的那一个div抓出来给iframe。 如上图所示,最后把iframe添加到body中; 当我们点击‘打印’的时候,其实就是调用iframe的print()方法,这样浏览器就自动弹出iframe打印的窗口了; 但问题是,当我点击打印后,打印的内容是一片空白,什么都没有? 为了...
1、将vue项目node-modules中的vue-print-nb/print文件夹下的所有内容拷贝出来，放到项目中。我这里是放到了src/assets/vue-print-nb目录下。2、修改拷贝的源码printarea.js中getBody()返回的。添加样式：style="height:auto"。3、修改main.js中的引用。解决。遗留问题：打印预览的最底部出现空白页，一般是由于margi...
只需要在要打印的元素上通过v-print属性即可实现打印的效果,可以选择打印全部或者打印指定页面,比如我只想要打印el-table表格部分,只需要在el-button按钮上面绑定v-print="'#printTable'",我已经提前在el-table上定义好了id="printTable",v-print的属性值对应的就是el-table。 打印效果预览 ...
一、安装vue-print-nb 没有什么前提要求,直接安装即可,但因为Vue2.0和Vue3.0有着不同的用法,因此需要安装的版本也不同,各位看官自行取舍。 Vue2.0版本安装方法: npminstall vue-print-nb --saveyarnadd vue-print-nb Vue3.0版本安装方法: npm install vue3-print-nb --save ...
npm install vue-print-nb 1. 第二步、引入插件 /** * main.js / import Vue from 'vue' import Print from 'vue-print-nb' Vue.use(Print) 1. 2. 3. 4. 5. 6. 第三步、代码编写 打印参数说明 id: "printDomId", // 需要打印的容器ID ...
print3.png (2)打印预览和设置 点击打印按钮,就会弹出打印预览和设置的弹框,在设置区域可以选择打印机、可以选择打印布局(横向、纵向)、打印纸张尺寸、边距和页眉页脚等 print2.png 4、其他需求 (1)打印隐藏内容 在打印弹框中需求显示查看的内容,但是在打印的时候需要隐藏,不打印显示 ...
这种直接改包的方法也不太好,如果其他人下载你的代码,也需要修改包,所以,最好把这个包拿出来,放在文件中,在main.js直接引用 main.js 引用 import Print from '@/utils/vue-print-nb/' 新增 最近有收到问题,打印页面的标题是怎么设置的,我自己试了一下,发现使用之前的方法是undefined,去官网看了下,作者又修...
1. 安装 vue3-print-nb 首先,确保你已经安装了vue3-print-nb包。你可以通过 npm 或 yarn 安装它: npm install vue3-print-nb 1. 或者 yarn add vue3-print-nb 1. 2. 在 Vue 项目中导入并使用 在Vue 组件中,导入vue3-print-nb,并在需要的地方使用它。