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

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

        <div id="printMe" ref="print">

            <div style="page-break-after:always;">第一页</div>

            <div style="page-break-after:always;">第二页</div>

        </div>

        <el-button @click="print">打印</el-button>

        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：

                <el-button @click="print">打印</el-button>

                 <div id="printMe" ref="print">

                       <div style="page-break-after:always;" class="ll">第一页</div>

                        <div style="page-break-after:always;">第二页</div>

                  </div>

                js：

                printContext () {

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

                },

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