选择横向打印的预览样式:设置style的代码: print() { // size: A4 portrait; const style = '@page {margin:10mm 10mm; } ' + '@media print {.print_table{width: 100%;}}' ; this.$printJs({ printable: 'printTable', // 标签元素id type: 'html', style: style, targetStyles: ['*'], ...
1.新建plugins文件夹,文件夹下面新建print,新建Print.js 源码地址(https://github.com/xyl66/vuePlugs_printjs) // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom,
在Vue组件中使用print-js: import printJS from 'print-js'; methods: { print() { printJS({ printable: 'print-content', type: 'html', css: '/path/to/print.css' }); } } 通过printJS库,可以更加灵活地控制打印时的样式和内容。 四、详细解释和背景信息 1、使用CSS媒体查询 通过CSS媒体查询,可...
options, debug) {if(!(thisinstanceofPrint))returnnewPrint(dom, options, debug);this.options =this.extend({'noPrint': '.no-print'}, options);this.debug = debug;//是否调试打印,参数是针对打印页面的样式控制,便于显示打印的页面调试if((typeofdom) === "string") {this.dom =document.query...
一、引入JS文件的打印 1、main.js文件中引入: import Print from "./utils/print" Vue.use(Print) // 注册 2、vue组件中使用: <template> 打印内容 不要打印我 </template> this.$print(this.$refs.print) // 使用 3、注意事项: 需使用ref获取...
* 使用示例: 1. 先在mian.js中引入 * 2. 函数中调用this.$print(this.$refs.xxxx)*/ /* e...
在Vue项目中使用vue-print-nb库实现横向打印功能,可以通过CSS来控制打印样式。以下是详细的步骤和代码示例:1. 安装并引入vue-print-nb 首先,确保你已经安装了vue-print-nb。你可以通过npm或yarn来安装它: bash npm install vue-print-nb --save # 或者 yarn add vue-print-nb 然后,在你的Vue项目中引入这个...
一般后台系统需要用到打印,网上让用的print_nb组件,亲测过,还是把js整出来好用。 找到print.js文件放到plugins目录中,目录随意指定。 1、打印功能页面引用print.js import Print from '../../../plugins/print.js' 2、指定打印区域,不打印部分可以自定义class,在print.js中修改指定的类名 ...
一、引入print插件 1.1、新建文件夹和js文件 在根目录src下面新建一个plugins文件夹,下面新建一个print.js文件 也可以直接npm安装插件npm install print-js --save,但直接安装的插件配置会有问题,不建议 print.js代码核心点 在Vue.prototype的原型链上面注入$print方法 ...
VUE打印我们一般用printJS,虽然它也提供了边距设置,但不管怎么调,感觉都不对,也换其他组件试过,没啥区别,并不能解决问题。 今天又发来个需求,要求设置打印页面的上、下、左、右边距,因为每次打印都手动设置嫌麻烦。 但因为之前曾经试过很多次一直不成功,也一直不知道问题在哪,开始还推说不一定能实现,效果可能不...