use(print) app.mount('#app') //or // Local instruction import print from 'vue3-print-nb' directives: { print } 二、基本使用 1. 直接打印页面HTML 1)方法① 给要打印的部分设置一个 id② 在打印按钮中添加 v-print="'#id名'" 2)代码(以表格为例) <template> 打印 </template> con...
1)使用vuePlugsPrint.js 2)main.js 加入:import vuePlugsPrint from '@/utils/vuePlugsPrint' Vue.use(vuePlugsPrint); 3)创建打印模板页面:templatePrint.vue 4)使用页面引入: <el-col :span="1.5"> <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint" >打印</...
(1)把vue-print-nb的文件夹放到自己的文件夹中,在src 下新建utils文件 里面放入src 和index.js src里面是print.js 和printarea.js index.js和print.js是自定义指令有关的,我们需要的只是printarea.js main.js里面修改成如下 代码语言:javascript 复制 //import Print from 'vue-print-nb' //import Print from...
一、安装vue-print-nb 没有什么前提要求,直接安装即可,但因为Vue2.0和Vue3.0有着不同的用法,因此需要安装的版本也不同,各位看官自行取舍。 Vue2.0版本安装方法: npm install vue-print-nb --save yarn add vue-print-nb Vue3.0版本安装方法: npm install vue3-print-nb --save yarn add vue3-print-nb 二...
简介: vue 打印vue-print-nb 安装配置 npm install vue-print-nb --save main.js中 // 导入打印插件 import Print from 'vue-print-nb' Vue.use(Print); .vue页面中使用 打印内容 <el-button type="primary" v-print="'printConfig'">打印</el-button> data中定义变量 printConfig:{ id:'print...
在Vue.js应用中实现打印功能,可以通过多种方式来实现,具体取决于你的需求和场景。以下是几种常见的方法: 1. 使用window.print()方法 这是最简单直接的方法,它会打印整个页面。你只需在Vue组件中添加一个按钮,并在其点击事件中调用window.print()方法即可。 html <template> <div> <button ...
1、安装vue-print-nb依赖 (1)vue2安装方式 npm install vue-print-nb--save (2)vue3安装方式 npm install vue3-print-nb--save 2、在main.js中全局注册 (1)vue2注册方式 importPrintfrom'vue-print-nb'Vue.use(Print) (2)vue3注册方式 import{createApp}from'vue'importAppfrom'./App.vue'importprint...
//安装vue-print-nb npm install vue-print-nb --save //在Vue组件中导入 import Print from 'vue-print-nb' export default { components: { Print, }, ... } ``` 2.创建需要部分打印的表格:在Vue组件中使用HTML和CSS创建表格以及需要打印的页面内容。 ```html <template> 打印测试 表格标题 ...
在Vue中使用print打印图片的步骤非常简单:1、引入图片资源并在模板中显示;2、使用window.print()方法触发打印功能。通过这两个步骤,你可以在Vue应用中实现图片的打印功能。接下来,我们将详细描述如何实现这一功能。 一、引入图片资源并在模板中显示 首先,你需要确保要打印的图片资源已经被正确引入并显示在Vue组件中。
前端环境:Vue2 打印插件:vue-print-nb Node版本:v16.20.2 第一步、安装依赖 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.