广东住房和城乡建设厅官方网站,广东微信网站制作报价表,思途建站,wordpress安装 centos最近开发了一个需求#xff0c;要求实现预览图片、pdf、excel、word、txt等格式的文件#xff1b; 每种格式的文件想要实现预览的效果需要使用对应的插件#xff0c;如果要实现excel格式文件的预览#xff0c;要用到哪种插件呢#xff1f;
答案#xff1a;xlsx.full.min…最近开发了一个需求要求实现预览图片、pdf、excel、word、txt等格式的文件 每种格式的文件想要实现预览的效果需要使用对应的插件如果要实现excel格式文件的预览要用到哪种插件呢
答案xlsx.full.min.js
xlsx.full.min.js是由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库功能强大支持格式众多支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。
那到底是怎么使用的呢
获取excel内容加载到html中设置表格的样式
整个代码如下然后我们逐步进行分析。
!--* excel文件预览组件封装
--
templatediv classpageExceldiv classexcelRegiondiv classexcelSheetspanv-for(item, index) in sheetList:keyindexv-htmlitem.sheetName:classitem.isSelected ? active : clickswitchSheet(index)/span/divdivclassexcelTablev-for(item, index) in sheetList:keyindexv-htmlitem.contentv-showitem.isSelected/div/div/div
/templatescript setup
import LoadScript from ./utils/loadScript;
import allRequestAPI from ./api/request.js;
import { onMounted, ref } from vue;
import { getString } from ./utils/util.js
let id getString(id)
let excelToken getString(token)
let sheetList ref([]);onMounted(() {getExcel();
});// 获取excel
function getExcel() {sheetList.value [];LoadScrpt.load([public/xlsx.full.min.js]).then(() {getExcelFileContent();});
}// 获取excel的内容
function getExcelFileContent() {allRequestAPI.getExcelFileStream(id{excelToken: excelToken},arraybuffer).then((res) {// 处理编码let ary ;// 记住一点res.data是文件流所以这样写如果返回的res是文件流那么就写new Uint8Array(res)let bytes new Uint8Array(res.data);let length bytes.byteLength;for (let i 0; i length; i) {ary String.fromCharCode(bytes[i]);}// 读取excel内容 binary二进制let wb XLSX.read(ary, { type: binary });// sheet列表let sheetFileList wb.SheetNames;sheetFileList.forEach((item, index) {let ws wb.Sheets[item];let fileContent ;try {// 把excel文件流转化为html字符串以便于v-html使用fileContent XLSX.utils.sheet_to_html(ws);} catch (error) {}sheetList.value.push({name: item,isSelected: index 0,content: fileContent,});});console.log(sheetFileList);console.log(表格内容);console.log(sheetList);}).catch((error) {console.log(error);});
}// 切换excel的sheet
function switchSheet(i) {sheetList.value.forEach((item, index) {item.isSelected index i;});
}
/scriptstyle scoped langless
.excelRegion {flex: 1;overflow-x: scroll;align-items: center;padding: 12px;background-color: #f8f8f8;.excelSheet {display: flex;white-space: nowrap;padding-bottom: 15px;span {display: block;height: 36px;line-height: 36px;padding: 0 12px;background-color: #fff;font-size: 14px;box-shadow: 0px 2px 4px 3px rgba(204, 204, 204, 0.34);.active {background-color: #ff6d00;color: #fff;}}}:deep(.excelTable) {table {border-collapse: collapse !important;background-color: #fff;td {word-break: keep-all;white-space: nowrap;border: 1px solid #000;padding: 0px 8px;font-size: 12px;color: #666;}}}
}
/style
Uint8Array 数组类型表示一个 8 位无符号整型数组创建时内容被初始化为 0。创建完后可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
String.fromCharCode() 静态方法返回由指定的 UTF-16 码元序列创建的字符串。
官方githubhttps://github.com/SheetJS/js-xlsx
本文配套demo在线演示地址http://demo.haoji.me/2017/02/08-js-xlsx/
这篇文章对我帮助本大如何使用JavaScript实现纯前端读取和导出excel文件
