博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【js】——前端无插件导出excel:自定义sheet、插入图片、设置打印、页边距、页脚等...
阅读量:5881 次
发布时间:2019-06-19

本文共 1076 字,大约阅读时间需要 3 分钟。

背景

前段时间因一个需求后端无法完成,所以交给前端来实现,导出表格,需要实现:

1、支持多个sheet,并且有自己的name
2、根据要求合并单元格,设置单元格的宽高
3、在表格内有各自的二维码
4、打印的页边距为左右各0.5cm
5、打印多页的话,固定表头
6、设置页脚

实现

导出后,如下图所示:

图片描述

图片描述

源码

略凌乱,欢迎指正及优化。

思路

用现有的js导出excel的插件,无法实现,所以只能手写各种样式代码;

关于打印、页脚之类无从下手的要求,需要导出后,复制一份,原文件拖进sublime,查看源码,复制的那份用wps打开,设置打印、页脚。然后复制的那份拖进sublime,对比两个文件的代码有什么不同,就基本可以知道打印、页脚的代码。

Bug

1、只能用wps打开,如果用excel打开的话,会报错

2、wps打开后,如果修改了内容,保存后再打开,二维码消失

重点代码

1、设置页脚及页边距

2、文字折行

   送货人:   

日 期 :

3、打印固定表头

Print_Titles
1
=3D'2773'!$1:$7
Print_Titles
1
=3D'2773'!$1:7

4、插入图片

目前只支持插入转成base64的图

------BOUNDARY_0008----Content-Location: file:///C:/0E8D990C/SongHuoDan/code2773.xmlContent-Transfer-Encoding: base64Content-Type: image/jpegiVBORw0KGgoA...省略掉...Qn9mxgAAAABJRU5ErkJggg==------BOUNDARY_0008----Content-Location: file:///C:/0E8D990C/SongHuoDan/code2774.xmlContent-Transfer-Encoding: base64Content-Type: image/jpeg

其他的请自行摸索……

注意

1、请严格按照格式拼接代码(空格、空行等)

2、注意分割线boundary="----BOUNDARY_0008----",BOUNDARY_0008可以改成别的

转载地址:http://ikvix.baihongyu.com/

你可能感兴趣的文章
考拉消息中心消息盒子处理重构(策略模式)
查看>>
so easy 前端实现多语言
查看>>
【追光者系列】HikariCP源码分析之ConcurrentBag&J.U.C SynchronousQueue、CopyOnWriteArrayList...
查看>>
在navicat中如何新建连接数据库
查看>>
canvas系列教程05-柱状图项目3
查看>>
css绘制几何图形
查看>>
HTML标签
查看>>
理解JS中的Event Loop机制
查看>>
转载:字符编码笔记:ASCII,Unicode和UTF 8
查看>>
修复看不懂的 Console Log
查看>>
Android跨进程通信 AIDL使用
查看>>
ajax常见面试题
查看>>
结合kmp算法的匹配动画浅析其基本思想
查看>>
vue进行wepack打包执行npm run build出现错误
查看>>
【d3.js v4基础】过渡transition
查看>>
VUEJS开发规范
查看>>
Android系统的创世之初以及Activity的生命周期
查看>>
彻底解决Linux下memcached的安装
查看>>
人人都会数据采集- Scrapy 爬虫框架入门
查看>>
Android网络编程11之源码解析Retrofit
查看>>