只需要在要打印的元素上通过v-print属性即可实现打印的效果,可以选择打印全部或者打印指定页面,比如我只想要打印el-table表格部分,只需要在el-button按钮上面绑定v-print="'#printTable'",我已经提前在el-table上定义好了id="printTable",v-print的属性值对应的就是el-table。 打印效果预览 以上实现了一个最
import{VuePrintNext}from'vue-print-next';functionhandlePrint(){newVuePrintNext({el:'#printMe',/** 其他参数 */});}<template>打印局部内容这是需要打印的内容</template> 📋 API 详解 vPrint指令 全屏打印:打印整个页面 局部打印:打印局部内容,其中#printMe是需要打印的 DOM 元素选择器。 VuePrintNext...
也可以将vue-print-nb源码放到项目中,即print里面的代码 如: 只是要改动一下,vue3自定义指令和vue2自定义指令不太一样,将print.js中的 bind(el, binding, vnode) {} 函数修改为 mounted: (el, binding, vnode) => {}, 去掉vue.$nextTick, 还要注意替换main.js文件里的print引用文件地址 就可以使用了...
使用vue-print-nb打印,不同分辨率(1366一下或1600以上)时,el-table有些列没有打印出来(页面能够正常展示),查看官方api,通过设置打印样式也无法全部打印: 1printObj:{2id:"printId",3popTitle:"",4extraHead: ', #printId { width: 100%; } '5} 解决方法1:手撸一个el-table样式的表(没有分页): 样...
1.window.print() 浏览器原生 API window.print() 可以用于打印当前窗口(window.document)视图内容。调用此方法会产生一个打印预览弹框,用户可以根据具体设置来得到打印结果。 2. 使用插件vue-print-nb 调用window.print() 会对整个 document.body 进行打印,而我们通常只需要打印一部分页面,可以使用打印插件vue-prin...
vue-print-nb:简单易用,适合基本的打印需求。 vue-html-to-paper:提供更多选项和样式支持,适合需要定制打印样式的情况。 样式处理: 在打印内容中使用内联样式或引入外部样式表,确保打印结果符合预期。 可以通过插件选项(如vue-html-to-paper的styles选项)引入必要的样式文件。
Print local range Preview Print Async Url v-print API Install 在线DEMO ONLINE DEMO Vue2 Version: npm install vue-print-nb --save importPrintfrom'vue-print-nb'// Global instructionVue.use(Print);//or// Local instructionimportprintfrom'vue-print-nb'directives:{print} ...
打印我使用的是vue3-print-nb,vue2也有对应的版本。 1. 安装vue3-print-nb npm install vue3-print-nb --save vue2 版本 npm install vue-print-nb --save 安装完毕后,在vue3中使用是在main.js中进行引入 import print from 'vue3-print-nb' ...
v-print API Install 在线DEMO ONLINE DEMO Vue2 Version: npm install vue-print-nb --save import Print from 'vue-print-nb' // Global instruction Vue.use(Print); //or // Local instruction import print from 'vue-print-nb' directives: { print } Vue3 Version: npm install vue3-print-nb...
Vue3是目前流行的前端框架之一,vue-print插件提供了简单易用的API,使得在Vue3中实现打印功能变得便捷。 二、安装与设置 1. 初始化 Vue3 项目 如果你还没有 Vue3 项目,你可以使用 Vue CLI 快速创建一个: vue create vue-print-demo cd vue-print-demo 2. 安装 vue-print 插件 在项目根目录下运行以下命令...