前端js实现页面生成word下载、打印功能引用jQuery.print.js

示例如图：

 一、首先，我们使用jQuery.print.js辅助开发：

下载地址：GitHub - DoersGuild/jQuery.print: Easy to use, Element Printing Plugin for jQuery

html代码：<div id="wordStyl" style="background: #fff;margin: auto;"></div>
下载事件：<i-button type="default" style="width: 150px;margin-left: 80px" @click="downAccountSureDetail">下载打印</i-button>
downAccountSureDetail:function(){
                var _this = this
                var newAccountYpe = ""
                var newBankZfb = ""
                var ifShowCompany = ""
                if(_this.sureId=='1'){
                    newBankZfb = "银行账户"
                }else if(_this.sureId=='2'){
                    newBankZfb = "支付宝账户"
                }
                if(_this.sureId=='1' && _this.detailSure.accountType=='1'){
                    newAccountYpe = "对公账户"
                }else if(_this.sureId=='1' && _this.detailSure.accountType=='2'){
                    newAccountYpe = "对私账户"
                }else if(_this.sureId=='2' && _this.detailSure.accountType=='1'){
                    newAccountYpe = "企业账户"
                }else if(_this.sureId=='2' && _this.detailSure.accountType=='2'){
                    newAccountYpe = "个人账户"
                }
                if(_this.formDetail.merchantType=='03' || _this.formDetail.merchantType=='02'){
                    ifShowCompany = "公司名称："+_this.formDetail.sellerName+"（盖章）"
                }else{
                    ifShowCompany = ""
                }
                var wordStyls = document.getElementById("wordStyl");
                var strText1 = "<h1 class=\"sureTitle\">收款账户确认函</h1>\n" +
                    "                <h6 class=\"sureSmallTitle\">致：杭州某某有限公司</h6>\n" +
                    "                <div class=\"sureSmallStyl\">兹确认以下账户为"+_this.formDetail.sellerName+"的指定收款账户</div>\n" +
                    "<div class=\"bankStylName\">"+newBankZfb+"：</div>\n" +
                    "<div class=\"tableStylAll\">" +
                    "                    <div class=\"tableStylAlli\">账户类型</div>\n" +
                    "                    <div class=\"tableStylAllCont\">"+newAccountYpe+"</div>\n" +
                    "                    <div class=\"tableStylAlli\">开户人名称</div>\n" +
                    "                    <div class=\"tableStylAllCont\">"+_this.detailSure.openName+"</div>\n" +
                    "                    <div class=\"tableStylAlli\">开户银行</div>\n" +
                    "                    <div class=\"tableStylAllCont\">"+_this.detailSure.openBank+"</div>\n" +
                    "                    <div class=\"tableStylAlli\">开户支行</div>\n" +
                    "                    <div class=\"tableStylAllCont\">"+_this.detailSure.openBankName+"</div>\n" +
                    "                    <div class=\"tableStylAlliBtm\">银行卡号</div>\n" +
                    "                    <div class=\"tableStylAllContBtm\">"+_this.detailSure.bankCard+"</div>\n" +
                    "                </div>\n" +
                    "<div class=\"noneCont\">&nbsp;</div>\n" +
                    "<div class=\"contFoterAll\"><div>&nbsp;&nbsp;</div><div style=\"text-align: left;min-width: 300px\">"+ifShowCompany+"</div></div>\n" +
                    "                <div style=\"justify-content: space-between;margin: 50px 0;display: flex\"><div>&nbsp;&nbsp;</div><div style=\"text-align: left;min-width: 300px\">姓名："+_this.formDetail.legalRepresen+"</div></div>\n" +
                    "                <div style=\"justify-content: space-between;display: flex\"><div>&nbsp;&nbsp;</div><div style=\"text-align: left;min-width: 300px\">日期："+_this.detailSure.accountCreatime+"</div></div>"
                
                    var pObj = document.createElement("div");
                    pObj.style.paddingTop = '50px'
                    pObj.style.paddingBottom = '50px'
                    pObj.style.paddingLeft = '80px'
                    pObj.style.paddingRight = '80px'
                    if(_this.sureId=='1' && _this.detailSure.accountType=='1'){
                        pObj.innerHTML = strText1
                    }
                    wordStyls.appendChild(pObj);
                    $("#wordStyl").print({
                        globalStyles: true,
                        mediaPrint: false,
                        stylesheet: null,
                        noPrintSelector: ".no-print",
                        iframe: true,
                        append: null,
                        prepend: null,
                        manuallyCopyFormValues: true,
                        deferred: $.Deferred(),
                        timeout: 750,
                        title: null,
                        doctype: '<!doctype html>',
                        title:''
                    });
                    pObj.remove()
            },