// 打印按钮绑定 printObj <el-button v-print="printObj">打印</el-button> // 在数据data中添加 printObj: { id: 'printMe', // 这里是要打印元素的ID popTitle: ' ', // 打印的标题 extraCss: '', // 打印可引入外部的一个 css 文件 extraHead: '', // 打印头部文字 preview: false, /...
现在,我们将创建一个Vue方法来处理打印功能。以下是示例代码: print() { let options = { // 打印样式表 styles: [ 'path/to/styles.css' ], // 要打印的元素的id id: 'printable' }; Print(options); } 复制 在这里,我们首先定义打印选项。我们指定要在打印中使用的样式表和要打印的元素的id。然后...
在Vue 3项目中,使用vue3-print-nb插件进行打印时,可以通过自定义CSS样式来设置打印内容的样式。以下是一些关于如何设置vue3-print-nb打印样式的详细步骤和注意事项:1. 安装vue3-print-nb插件 首先,你需要在Vue 3项目中安装vue3-print-nb插件。可以通过npm或yarn进行安装: ...
打印测试 <el-button v-print="'#printTest'">打印</el-button> 假如我们想实现,在打印的时候改变样式,或者隐藏一些不需要打印的元素,直接使用上面的方法就不能实现 需要进行如下修改 (1)把vue-print-nb的文件夹放到自己的文件夹中,在src 下新建utils文件 里面放入src 和index.js src里面是print.js 和pri...
printConfig:{ id:'printPage', //被打印部分的id popTitle:'打印后,页眉居中的标题' }, 必要的样式 <!--打印时添加的样式--> /*指定打印的分页*/ /deep/ section{ page-break-after:always; } /*避免出现空白尾页*/ html,body,#app{ height: 98% !important; margin: 0px; padding: 0px; ...
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button> data: printObj: { id: 'printMe',//id popTitle: "标题",//自定义设置标题 }, 四:插件优化 1.去掉页眉页脚 @page { size: auto; margin: 0mm; } 2....
打印插件: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. 5. 6. 第三步、代码编写 ...
1、element-ui 组件在打印时会样式崩塌,所以在打印区域div中最好不要使用element-ui 组件,直接使用原生组件样式; 2、打印区域样式最好使用内联样式,或者先加载样式再加载组件,否则样式会崩塌。 知识点 更多精彩内容,就在简书APP "小礼物走一走,来简书关注我" ...
vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com/shengbid/vue-demo这个项目里平时博客写的一些功能的代码都放在里面,有需要可以...
<el-button v-print="'#printArea'">报名信息打印</el-button> vue-print-nb插件的一些优化 1.去掉页眉页脚 @page { size: auto; margin: 8mm; } 2.打印时没有背景色 Chrome & IE中在样式里加入这句话: -webkit-print-color-adjust: exact; //解决打印没有背景色的问题.is-bordered...