(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...
在上面的代码中,我们使用了Print组件的header和footer选项来自定义页眉和页脚的内容。我们通过查询选择器(document.querySelector)来获取页眉和页脚元素的内容,并将其传递给Print组件。 4. 样式调整 我们为页眉和页脚添加了简单的样式,使它们固定在页面的顶部和底部,并设置了背景颜色。你可以根据需要进一步调整这些样式。
第一步:安装print插件 可以使用npm或者yarn来安装print插件。在终端中运行以下命令: npm install vue-print-nb --save 或者 yarn add vue-print-nb 第二步:在Vue组件中引入print插件 在需要使用打印功能的组件中,通过import语句将print插件引入: import Print from 'vue-print-nb' 然后,通过Vue.use()方法来注册...
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.use(Print); 3. 页面中使用 <el-dialog:visible.sync="openCodeCard"width="40%"class="offset-dialog"append-to-body :show-close="false"><divid="printCodeBox"><divclass="pageCodeDiv"style="page-break-after:always;">需要打印的内容部分</div></div><spanslot="footer"class="dialog-footer...
<template slot="footer"> <a-button key="back"@click="handleCancel">取消</a-button> <a-button key="submit"type="primary"v-print="'#printWrap'">打印</a-button> </template> </a-modal> </template> <script>import momentfrom'moment'import { TableColumns }from'./index'import { printIn...
<template #footer> <span class="dialog-footer"> <el-button @click="dialogFormVisible = false">Cancel</el-button> 3、确认打印按钮,点击开始打印 <el-button type="primary" @click="dialogFormVisible = false" v-print="printObj"> Confirm </el-button> ...
1、弹出的对话弹框 <el-dialog v-model="dialogFormVisible" title="Shipping address" destroy-on-close> 2、要打印的内容,此处封装成了组件 <printCustomerDetail :printId="printId" :AuditMethod="AuditMethod" :printLevel="printLevel" ref="printRef"> </printCustomerDetail> <template #footer> <span...
vue3-print-nb This is a directive wrapper for printed, Simple, fast, convenient, light. Install Vue2 Version: npm install vue-print-nb --save importPrintfrom'vue-print-nb'// Global instructionVue.use(Print);//or// Local instructionimportprintfrom'vue-print-nb'directives:{print} ...
1. 在vue中安装vue-pdf和Print.js yarnaddvue-pdf...yarnaddprint-js 2. 可以全局引入,也可以在需要的文件中引入 importpdffrom'vue-pdf'importprintJSfrom'print-js' 3.主要代码 <a-modal:visible="previewVisibleForAll":footer="null"@cancel="handleCancelAll":width="800":maskClosable="maskClosable"...