vue项目 打印多页 分页 随手记

一、使用window.print()打印 ,打开一个新窗口,实现多页打印效果,但样式会丢失,只能内嵌样式;

        1、template

        

            第一页

            第二页

        

        打印

        css分页处理: page-break-after:always;   查看CSS page-break-after 属性

        2、js

        print(){

            let htmlStr = document.getElementById('printMe');

            let newWin = window.open(""); //新打开一个空窗口

            newWin.document.body.append(htmlStr); // 打印内容

            newWin.document.close(); //在IE浏览器中使用必须添加这一句

            newWin.focus(); //在IE浏览器中使用必须添加这一句

            setTimeout(function() {

                newWin.print(); //打印

                newWin.close(); //关闭窗口

            }, 100);

        }

二、使用print.js ,实现多页打印

        1、将js下载到本地使用   点击下载print.js  


main.js里引入js

                import  Print  from  './utils/print';

                Vue.use(Print)

                template:

                打印

                 

                       第一页

                        第二页

                 

                js:

                printContext () {

                    this.$print(this.$refs.print)

                },

        2、npm 安装  npm i vue-printjs --save  使用方法,同上

你可能感兴趣的:(vue项目 打印多页 分页 随手记)