本文已参与「新人创作礼」活动，一起开启掘金创作之路。
1.功能需求
客户发来一份word文件，如图所示， 一个出库单的表格，要求做到他们的仓储管理系统里去，出库时自动填写表格，格式保持不变，可以在网页预览，也能下载PDF文件，然后打印出来签字。
2.实现思路
1.Word→html，找一个word转html的工具——档铺(可以试用30次)
生成的效果还不错，省了很多时间
2.html→vue(el-dialog),把生成的html文件加到vue视图
通过el-dialog来显示该页面，根据多选数据，文本以循环渲染的方式将每一行数据加载出来，代码如下（除了循环和数据模版，都是工具自动生成的）：
<tr style="height:32.9pt" v-for="item in multipleSelection"> <td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:74.4pt"> <p style="margin:0pt; orphans:0; widows:0"><span style="font-family:宋体; font-size:22pt; vertical-align:baseline">{{item.name}}</span></p> </td> <td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:74.4pt"> <p style="margin:0pt; orphans:0; widows:0"><span style="font-family:宋体; font-size:22pt; vertical-align:baseline">{{item.amount}}</span></p> </td> <td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:74.4pt"> <p style="margin:0pt; orphans:0; widows:0"><span style="font-family:宋体; font-size:22pt; vertical-align:baseline">{{item.style}}</span></p> </td> <td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:74.45pt"> <p style="margin:0pt; orphans:0; widows:0"><span style="font-family:宋体; font-size:22pt; vertical-align:baseline">{{item.price}}</span></p> </td> <td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:74.45pt"> <p style="margin:0pt; orphans:0; widows:0"><span style="font-family:宋体; font-size:22pt; vertical-align:baseline">{{item.other}}</span></p> </td> </tr>
3.vue(el-dialog)→PDF,通过HtmlToPDF.js将整个报表div生成PDF文件并下载下来
3.总结
作为前端初学者，接收任务第一时间没有上网搜解决方案，而是自己思考构建出事个流程，对业务逻辑的培养有一定的锻炼。最终呈现的效果客户非常满意，因为整体格式，包括字体都与要求非常一致。
4.思路拓展
运用相同的流程，可以根据word文档模版动态地生成网页，然后通过对系统数据的分析和加载渲染生成相应的文档，下载出PDF或word，可以用来生成工作日志/日周月报/情况报告，解决客户烦琐的工作痛点，方便客户的工作，作为我们系统设计的一个亮点。
相信xdm都有更成熟简便的解决方案，欢迎大佬指教。
