浏览器打印功能

vue2.x +vue-cli4.x实现浏览器无预览打印数据

IE内核浏览器打印（IE11）

配置js文件：

/**
 * 单个打印
 * @param data 需要打印的object数据
 */
const printFn = function (data, cb) {
    let wdapp;
    let wddoc;
    
        try {
            // 创建ActiveXObject对象
            wdapp = new ActiveXObject('Word.Application'); 
        }
        catch (e) {
            /*
            * 如果抛异常，请检查一下几点：
            * 1.确保机器已安装Office;
            * 2.已将本系统的站点名加入到IE的信任站点列表中;
            * 3.设置浏览器的安全;（internet选项-安全-自定义级别-对标记为可安全执行脚本的ActiveX控件执行脚本（启用）-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本（提示））
            * 4.这是微软的东西只能在ie下才能运行;
            * 5.仔细阅读每一个关键点。
            */
            console.log('无法调用Office对象，！', e);
            wdapp = null;
            return cb('error');
        }

        // 商品列表
        let drugs = '';
        data.itemList.forEach(function (item) {
            drugs += `商品编码：${item.bn}
商品名称：${item.commonName}
批号/效期：${item.batchNumber || ''}/${item.validDateStr || ''}
价格*数量：¥${item.price}*${item.nums}`;
        });

        let printUrl = 'http://'+window.location.host + 
                        (process.env.NODE_ENV === 'test' ? '/edyLS/dist' : process.env.NODE_ENV === 'micro'? '/edyLSmicro' : process.env.NODE_ENV === 'pre'? '/edyLSpre' : '')
                        +'/printTemp.doc';// 打印模版
        wdapp.Documents.Open(printUrl); // 打开本地(客户端)word模板
        wddoc = wdapp.ActiveDocument;
        wddoc.Bookmarks('IndexNo').Range.Text =  data.indexNo; // 序号
        wddoc.Bookmarks('CompanyName').Range.Text =  data.ordersEntity.companyName; // 公司名称
        wddoc.Shapes.AddPicture(data.ewm, 0, -1, 0, 85, 200, 60); // 条形码
        wddoc.Bookmarks('OrderNo').Range.Text = data.showNo; // 订单编号
        wddoc.Bookmarks('SourceName').Range.Text = data.ordersEntity.sourceName; // 订单来源平台
        wddoc.Bookmarks('StoreName').Range.Text = data.ordersEntity.storeName; // 门店名称
        wddoc.Bookmarks('StoreAddress').Range.Text = data.ordersEntity.storeAddress; // 门店地址
        wddoc.Bookmarks('ShipName').Range.Text = data.ordersEntity.shipName; // 收货人
        wddoc.Bookmarks('ShipAddr').Range.Text = data.ordersEntity.shipArea + data.ordersEntity.shipAddr; // 收货人地址
        if (data.ordersDeliveryEntity) {
          wddoc.Bookmarks('DeliveryName').Range.Text = data.ordersDeliveryEntity.deliveryName; // 配送人
          wddoc.Bookmarks('DeliveryMobile').Range.Text = data.ordersDeliveryEntity.deliveryMobile; // 配送人电话
          wddoc.Bookmarks('memo').Range.Text = data.ordersDeliveryEntity.memo || ''; // 留言
        } else {
          wddoc.Bookmarks('DeliveryName').Range.Text = ''; // 配送人
          wddoc.Bookmarks('DeliveryMobile').Range.Text = ''; // 配送人电话
          wddoc.Bookmarks('memo').Range.Text = ''; // 留言
        }
        wddoc.Bookmarks('Drugs').Range.Text = drugs || '空'; // 商品
        wddoc.Bookmarks('CostGoodsPrice').Range.Text = data.ordersEntity.costGoodsPrice; // 总价
        wddoc.Bookmarks('PrintTips').Range.Text = data.ordersEntity.printTips; // 温馨提示
        wddoc.Bookmarks('PrintProcess').Range.Text = data.ordersEntity.printProcess; // 操作流程
        wddoc.Bookmarks('End').Range.Text = data.indexNo; // 结束
        
        wdapp.visible = false; // word模板是否可见
        wddoc.saveAs('D:\\ydyPintTemplate.docx'); // 保存临时文件word
        // wdapp.Application.PrintPreview(); // 预览
        wdapp.Application.Printout(); // 调用自动打印功能

        wdapp.quit();
        wdapp = null;
        return cb('success');
        
};

export default printFn;

使用：

printFn(ObjectData, (res) => {
    console.log(res) // 回调
})

说明：仔细阅读以下说明

1. 确保机器已安装微软自家的Office办公软件；
2. 已将本系统的站点名加入到IE的信任站点列表中；
3. 设置浏览器的安全;（internet选项-安全-自定义级别-对标记为可安全执行脚本的ActiveX控件执行脚本（启用）-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本（提示））；
4. 这是微软的东西只能在ie内核下才能运行；

printTemp.doc打印模板

printTemp.doc打印模板需创建标签，创建方式：

选中占位文本---->文档编辑器顶部选择“插入”---->二级目录选择“书签”---->弹出框内输入标签名称，建议英文，该标签名称，对应的是配置js文件中的wddoc.Bookmarks('文档标签')，此处的内容将会替换文档的占位文本

wddoc.Shapes.AddPicture(FileName, LinkToFile, SaveWithDocument, Left, Top, Width, Height); 

图片插入说明：

wddoc.Bookmarks('IndexNo').Range.Text =  '内容'

wddoc.Bookmarks(‘tag’) ，tag即为前面所说的doc文档的书签，打印时此位置的内容将会被替换

非IE内核浏览器打印

安装vue-print-nb

npm install vue-print-nb --save

注册main.js

import Print from 'vue-print-nb';
Vue.use(Print);  // 注册

使用

<div 
     id="printWrap"
     style="color:#000"
     >
    .... 打印的内容
</div>
<div v-print="'#printWrap'" id="printBtn">点我就打印</div>

注意：

1. 所有的样式均是行内样式，在< style>< /style>标签里面写的不会被打印；
2. 此时点击打印是会弹出电脑的打印预览弹框，需要人工手动去点击打印才能真正打印。

设置浏览器静默打印

浏览器快捷方式增加: --kiosk-printing

该种方式预览窗口会打开然后自动关闭，不需要人工点击，打开时间也比较短。

设置方式：

浏览器快捷图标---->鼠标右键---->属性----->弹出框内“目标”修改—>关闭所有窗口重启浏览器，如下图（前面有空格）：

备注

在双核浏览器中，兼容模式下都将会选择IE内核打印，极速模式为非IE内核打印。

请注意取消页头和页尾。

亲测有效：谷歌，360，欧朋，UC，猎豹，搜狗，Edge。

火狐、双核浏览器无效

额外

vue-print-nb插件似乎只能使用指令形式v-print打印，我项目中使用了js模拟点击事件触发v-print

let e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
document.getElementById('printBtn').dispatchEvent(e);