Web 浏览器预览 Excel 及打印

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 才会知道怎么给你方案。

结语

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

相关推荐
G等你下课3 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在4 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵7 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius7 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91010 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala12 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy12 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
嘻嘻哈哈开森15 分钟前
技术分享:深入了解 PlantUML
后端·面试·架构
snakeshe101015 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端
星月日16 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript