PPT导入Excel表格
私信回复关键词【CSV】,获取CSV工具,帮你批量转换上百个Excel文件格式!我们经常需要将表格导入 PPT 中演示。远歌知道,你肯定直接复制粘贴就完事儿了!但学过「和秋叶一起学 Excel」的人都...
2024.10.17作者: 小丑
转发链接:https://mp.weixin.qq.com/s/h6Mp8PVmZmZNsZ1gLsQxRA
前言导出功能其实在开发过程中是很常见的,平时我们做导出功能的时候基本都是后台生成,我们直接只需要调一支接口后台把生成的文件放到服务器或者数据库mongodb中,如果是放到mongodb中的话,我们需要从mongodb中通过唯一生成的id去拿到文件,最后window.location.href就完事了。如果是放到服务器上,直接从服务器上下载就好了。下面我们使用另一种 H5 的新特性blob[1]对象来实现一下导出功能。
Blob: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob
什么是 BlobBlob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数数组中给出的值的串联组成。
var aBlob = new Blob( array, options );兼容性mimeType[2]在 Blob 的构造函数中options参数的接受一个参数type,这个参数代表的是媒体类型,告诉浏览器是什么类型的文件,常见的有
{".3gp","video/3gpp"},{".apk","application/vnd.android.package-archive"},{".asf","video/x-ms-asf"},{".avi","video/x-msvideo"},{".bin","application/octet-stream"},{".bmp","image/bmp"},{".c","text/plain"},{".class","application/octet-stream"},{".conf","text/plain"},{".cpp","text/plain"},{".doc","application/msword"},{".docx","application/vnd.openxmlformats-officedocument.wordprocessingml.document"},{".xls","application/vnd.ms-excel"},{".xlsx","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"},{".exe","application/octet-stream"},{".gif","image/gif"},{".gtar","application/x-gtar"},{".gz", "application/x-gzip"},{".h","text/plain"},{".htm","text/html"},{".html","text/html"},{".jar","application/java-archive"},{".java","text/plain"},{".jpeg","image/jpeg"},{".jpg","image/jpeg"},{".js", "application/x-javascript"},{".log","text/plain"},{".m3u","audio/x-mpegurl"},{".m4a","audio/mp4a-latm"},{".m4b","audio/mp4a-latm"},{".m4p","audio/mp4a-latm"},{".m4u","video/vnd.mpegurl"},{".m4v","video/x-m4v"},{".mov","video/quicktime"},{".mp2","audio/x-mpeg"},{".mp3","audio/x-mpeg"},{".mp4","video/mp4"},{".mpc","application/vnd.mpohun.certificate"},{".mpe","video/mpeg"},{".mpeg","video/mpeg"},{".mpg","video/mpeg"},{".mpg4","video/mp4"},{".mpga","audio/mpeg"},{".msg","application/vnd.ms-outlook"},{".ogg","audio/ogg"},{".pdf","application/pdf"},{".png","image/png"},{".pps","application/vnd.ms-powerpoint"},{".ppt","application/vnd.ms-powerpoint"},{".pptx","application/vnd.openxmlformats-officedocument.presentationml.presentation"},{".prop","text/plain"},{".rc", "text/plain"},{".rmvb","audio/x-pn-realaudio"},{".rtf","application/rtf"},{".sh", "text/plain"},{".tar","application/x-tar"},{".tgz","application/x-compressed"},{".txt","text/plain"},{".wav","audio/x-wav"},{".wma","audio/x-ms-wma"},{".wmv","audio/x-ms-wmv"},{".wps","application/vnd.ms-works"},{".xml","text/plain"},{".z","application/x-compress"},{".zip","application/x-zip-compressed"},{"","*/*"}导出我们需要调取接口来获取导出文件的内容,如果我们先后端分离的话,我们需要接口给我们返回Buffer, Blob, DOMString类型的数据,DOMStrings会被编码为UTF-8。
let blob = new Blob([接口返回的数据], {type: "application/vnd.ms-excel;charset=utf-8"});使用a标签,模拟点击a标签完成导出功能,通过URL.createObjectURL()[3]方法创建一个下载的链接地址,最后在不需要的时候URL.revokeObjectURL释放掉
let downloadElement = document.createElement("a");let href = window.URL.createObjectURL(blob); //创建下载的链接downloadElement.href = href;document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放掉blob对象文件名的设置文件名称通过报文头设置content-disposition属性设置,Content-Disposition参数:
attachment --- 作为附件下载inline --- 在线打开setHeader("Content-Disposition","inline; filename=文件名.mp3");setHeader("Content-Disposition","attachment;filename=test.xls");前端通过截取报文头里的content-disposition字段获取文件名称:
downloadElement.download =decodeURI(res.headers["content-disposition"].split("filename=")[1]) || ""; //下载后文件名完整代码这里的res代表后台返回的数据:
config: {url: "/ExportExcel", method: "post", data: "", headers: {…}, baseURL: "/api/", …}data: Blob {size: 5120, type: "application/vnd.ms-excel"}headers: {connection: "close", content-disposition: "attachment;filename=xxx.xls", content-encoding: "gzip", content-length: "1455", content-type: "application/vnd.ms-excel;charset=UTF-8", …}request: XMLHttpRequest {readyState: 4, timeout: 30000, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}status: 200statusText: "OK"前端代码
let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});let downloadElement = document.createElement("a");let href = window.URL.createObjectURL(blob); //创建下载的链接downloadElement.href = href;downloadElement.download =decodeURI(res.headers["content-disposition"].split("filename=")[1]) || ""; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放掉blob对象写在最后导出功能多种多样,根据浏览器的不同和需求的不同会有不同的问题出现其中的坑还是比较多的,适合自己需求的才是最好的。
作者: 小丑
转发链接:https://mp.weixin.qq.com/s/h6Mp8PVmZmZNsZ1gLsQxRA
私信回复关键词【CSV】,获取CSV工具,帮你批量转换上百个Excel文件格式!我们经常需要将表格导入 PPT 中演示。远歌知道,你肯定直接复制粘贴就完事儿了!但学过「和秋叶一起学 Excel」的人都...
2024.10.171.简述在java开发项目,我们经常会遇到将数据导出到Excel表格的需求 ,比较流行的使用POI、EasyExcel等。Apache POI是一个Java API,用于处理Microsoft Off...
2024.10.13随着商家的商品库存和销售数据的不断增长,批量导出商品数据对于商家来说变得尤为重要。在本文中,我将为大家介绍一些小程序批量导出商品的方法和步骤。点击订单管理->数据面板->商品销售统计,可以查看到的商品...
2024.10.19对于经常跟表格打交道的小伙伴来说,具备一些表格处理技能是非常有必要的。当你收到上级或者老师发来的表格截图,被要求将这些图片识别成电子文件的形式,你会如何解决呢?聪明的小伙伴就会想到使用软件来进行处理...
2024.10.19我们打开网络上需要的表格,复制网络链接;然后打开excel表格,点击数据,再点击自网站,粘贴你复制的网站链接,点击转到;选择你需要的网络表格,点击导入;这样你需要的表格就导入你的excel表格,就可以...
2024.10.17