Vue-cli中打印指定容器的内容

前言:

在传统的web项目中, 经常需要通过打印功能, 打印页面中的某些元素, 比如生成的票据, 发货单, 发票等等, 在js中可以通过 window.print() 来打印页面, 但是打印的是整个页面, 不是我们想要的;

换一种方案, 也是网上很多网友分享的, 把需要打印的节点容器赋值给document, 打印后再换回来, 比如下面的代码:

var oldHtml = document.body.innerHtml;
document.body.innerHtml = '需要打印的容器内容';
window.print();
document.body.innerHtml = oldHtml;

经过测试, 很不理想, 虽然实现了打印窗口打印出了想要打印的内容, 但是原页面不正了, 事件都没了...

再回过头来说, 传统的html已经很不理想了, 在现在常用的MVVM框架Vue-cli中, 更是不可行...

解决方案:

在Vue-cli中可以使用一个打印组件 vue-print-nb 来解决打印指定容器的内容, 包括弹窗中的...

下面举例一个完整的使用场景:
在一个页面中展示的是一些发货单, 需要在table操作列中加一个打印按钮, 打印出特定格式的票据...
前端使用的Vue-cli
后端使用的Springboot, 模板引擎 freemarker

1. 前端安装打印组件

npm install vue-print-nb --save

2. 前端main.js 引用组件

import Print from 'vue-print-nb'

Vue.use(Print);

3. 后端创建一个 freemarker 模板, 名称为 order.ftl, 封装数据后, 使用组件获取 html 内容, 下面是示例代码:

@Autowired
private FreeMarkerConfigurer freeMarkerConfigurer;

String templateName = "order.ftl";
 Template template = freeMarkerConfigurer.getConfiguration().getTemplate(templateName, "UTF-8");
        template.setOutputEncoding("UTF-8");
        return FreeMarkerTemplateUtils.processTemplateIntoString(template, content);

4. 前端调用接口获取后端返回的html内容, 具体代码就不写了, 就是 axios 发起 http请求

5. 前端使用一个容器, 可以在弹窗中, v-html标签是为了解析后端返回的html文本

<div id="printMe" v-html="后端返回的html数据"></div>
<el-button v-print="'#printMe'">打印</el-button>

6. 点击打印按钮, 弹出浏览器打印窗口, 完事!