Web 浏览器预览 Excel 及打印

欢迎阅读 "钱难挣，屎难吃"系列专栏。

今天要吃的屎呢，很变态，噢，不应该叫 "病态"。为什么这么说呢，其实就是客户的一个无关痛痒的需求：同事已经做好了采购订单的导出，但是客户需要在浏览器里面去预览 Excel 以及打印。这里的打印其实就是调起浏览器自带的打印功能进行打印，不需要服务器打印。

我听到这个需求，首先想的不是去实现，而是客户为什么不能去下载 Excel 然后用 WPS 或者 Office 转 PDF 进行打印呢，样式又完美？当然这不是我一个🐮🐴能决定的事，如果上面的人会沟通应该不是问题。咋办，只能开吃呗！

先看效果吧

看着挺简单的吧，但是🐮🐴写的痛苦啊。你也许会说为什么不在后端将 Excel 转 PDF 返回给前端呢，我也想啊可是效果不好，收费的东西呢公司买不起。

实现

一开始就是想要用 VueOffice 来预览，但是打印是个问题，但是既然能预览那肯定能用 print-js 或者 vue-print-nb 来打印，确实可以，但是预览效果不太好，打印不全、模糊。同事说我们前端自己封装了一个预览 Excel"组件"，去看了下需要复制一大坨 vue 文件，而且打印也只能打印可视区域。我只能说这能叫组件吗，而且是早已不维护的 Lucysheet 基础组件封装，这玩意很多人说这代码写的很烂，当然我不懂前端，也没看过其源码。但是呢前端说通过裁剪 canvas 就可以打印全部。

当然，到这里我的任务就完成了，裁剪交给基友后端同事做，我去写大屏 SQL，但是吧我不想写这种重复性的东西。

本着兴趣，自己做了，效果还行。

技术栈前端 xlsx 库外加手撸动态 html 搞定：先用 xlsx 库将 excel 文件转 json（不要问为啥不从后端给 json，问就是不想写，懒。），然后定制化的写 html 表格，合并，调整样式做后渲染出来就完成预览了，再调用浏览器自带的打印功能就 OJBK 了。

关键代码：

这里一定要用 iframe 来渲染，这是完全样式隔离，不然影响其他样式。

html 复制代码

<!-- Excel 预览对话框 -->
    <el-dialog title="预览打印 " :visible.sync="excelDialogVisible" width="80%" :before-close="closeExcelDialog">
      <div style="height: 500px">
        <iframe
          ref="previewIframe"
          style="width: 100%; height: 100%; border: none;"
        ></iframe>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="excelDialogVisible = false">关闭 </el-button>
        <el-button type="primary" @click="handlePrint">打印 </el-button>
      </div>
    </el-dialog>

其他代码没啥好说的，不会就问 AI 关键是你要会描述，比如说浏览器自带的打印分页表格破裂，你要会描述 AI 才会知道怎么给你方案。

结语

难吃，不过真香。当前也还可以优化，考虑在后端进行模板渲染，而且模版也很好调样式，但是做到这我觉得已经够了。因为这波屎，我想留着维护代码的人一起分享！哈哈。