1. 直接打印页面HTML 1)方法① 给要打印的部分设置一个 id② 在打印按钮中添加 v-print="'#id名'" 2)代码(以表格为例) <template> 打印 </template> const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Cash Assets', className: 'column-money', dataIndex: 'money'...
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" >打印</el-button> <template-print :row=" modalObj.form.row " ref="printRef"></template-print>...
简介: 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...
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button> data: printObj: { id: 'printMe',//id popTitle: "标题",//自定义设置标题 }, 四:插件优化 1.去掉页眉页脚 @page { size: auto; margin: 0mm; } 2.打印內容不自动换行问题 只需要给不自动换行的标...
yarn add vue-print-nb vue3安装: npm install vue3-print-nb --save ## yarn yarn add vue3-print-nb 2、使用 直接打印页面HTML 1)方法 ① 给要打印的部分设置一个 id ② 在打印按钮中添加 v-print="'#id名'" 2)代码(以表格为例)
npm install vue-print-nb --save (二)在main.js 中引入并注册 import Print from 'vue-print-nb' Vue.use(Print) (三)使用方法 代码语言:javascript 复制 打印测试 <el-button v-print="'#printTest'">打印</el-button> 假如我们想实现,在打印的时候改变样式,或者隐藏一些不需要打印的元素,直接使用...
(1)设置打印区域id和打印按钮自定义属性 ① id方式——在需要打印的单据内容最外面的div设置唯一的id,在打印弹框里的打印按钮设置自定义属性v-print,该属性值为打印单据div的唯一id print1.png ② 对象配置方式——在js中定义一个对象,对象中可配置打印区域相关属性,在需要打印的单据内容最外面的div设置唯一的id...
vue-print-nb 有两种打印模式 目前好像只知道支持(图片、后缀名为pdf)的格式文件 一、异步路径打印 动态请求api打印方式 1.安装依赖:npm install vue-print-nb --save 2.在main.js中引入 importPrintfrom'vue-print-nb'Vue.use(Print) 3.vue template 部分 v-print="print" ...
3. 打印按钮加v-print指令，其中#printMe指向打印区域 打印 4. 定义一个打印区域div ...
import Print from 'vue-print-nb'; const app = createApp(App); app.use(Print); app.mount('#app'); 四、实现打印功能 1. 创建票据打印的组件 在src/components 目录下创建 PrintInvoice.vue 组件: <template> 发票 发票号:{{ invoiceNumber }} 日期:...