前言:
在传统的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
- 前端安装打印组件
npm install vue-print-nb --save
- 前端main.js 引用组件
import Print from 'vue-print-nb'
Vue.use(Print);
- 后端创建一个 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);
前端调用接口获取后端返回的html内容, 具体代码就不写了, 就是 axios 发起 http请求
前端使用一个容器, 可以在弹窗中, v-html标签是为了解析后端返回的html文本
<div id="printMe" v-html="后端返回的html数据"></div>
<el-button v-print="'#printMe'">打印</el-button>
- 点击打印按钮, 弹出浏览器打印窗口, 完事!
