js vue 设置excel单元格样式_Vue XLSX使用及部分自定义样式

安装

npm install --save xlsx file-saver

引入

import XLSX from 'xlsx'

导入

importExcel (file) {

var f = file;

let _this = this;

var rABS = false;//是否将文件读取为二进制字符串

var reader = new FileReader();

FileReader.prototype.readAsBinaryString = function (file) {

var binary = "";

var rABS = false; //是否将文件读取为二进制字符串

var pt = this;

var wb; //读取完成的数据

var outdata;

var reader = new FileReader();

reader.onload = function (e) {

var bytes = new Uint8Array(reader.result);

var length = bytes.byteLength;

for (var i = 0; i 

binary += String.fromCharCode(bytes[i]);

}

if (rABS) {

wb = XLSX.read(btoa(fixdata(binary)), { //手动转化

type: 'base64'

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一个流行的JavaScript框架,可用于开发Web应用程序。如果要实现Excel导入功能,则需要使用一些Vue.js组件和库。 以下是Vue.js Excel导入的一般步骤: 1. 安装必要的依赖项,例如vue-excel-import,vue-xlsx,或者其他Excel导入相关的库。 2. 创建一个组件或页面,其中包含一个用于上传Excel文件的表单。 3. 通过Vue.js组件或库读取上传的Excel文件,并将其转换为JavaScript对象或数组。 4. 对读取的数据进行验证和处理,以确保数据的正确性和完整性。 5. 将数据保存到数据库或其他后端服务中。 例如,以下是使用vue-excel-import库实现Excel导入的示例代码: ``` <template> <div> <form> <input type="file" @change="importExcel" /> </form> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr v-for="user in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> </tr> </tbody> </table> </div> </template> <script> import VueExcelImport from 'vue-excel-import'; import VueXLSX from 'vue-xlsx'; export default { name: 'ExcelImport', data() { return { users: [], }; }, methods: { importExcel(event) { const file = event.target.files[0]; VueExcelImport.parse(file).then((rows) => { const users = VueXLSX.utils.sheet_to_json(rows[0]); this.users = users; }); }, }, }; </script> ``` 在上述示例中,我们导入了两个库:vue-excel-import和vue-xlsx。然后,我们创建了一个组件,其中包含一个表单元素,用于上传Excel文件。上传文件后,我们使用VueExcelImport库解析文件,并将其转换为JavaScript对象。接下来,我们使用vue-xlsx库将对象转换为JSON数组,并将其存储到组件的data属性中。最后,我们在表格中显示用户数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值