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

结语

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

相关推荐
Running_C6 分钟前
常见web攻击类型
前端·http
jackyChan6 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript
lichenyang4536 分钟前
快速搭建服务器,fetch请求从服务器获取数据
前端
天南星6 分钟前
java-WebSocket在Java生态中的发展历程
java·后端·websocket
豆苗学前端11 分钟前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
光影少年12 分钟前
react16-react19都更新哪些内容?
前端·react.js
奇舞精选19 分钟前
用 AI 提效的新方式:全面体验 Google Gemini CLI
前端·google·ai编程
工藤学编程32 分钟前
分库分表之实战-sharding-JDBC绑定表配置实战
数据库·分布式·后端·sql·mysql
我命由我1234542 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO42 分钟前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key