js xlsx 的导出

这篇博客介绍了如何使用JavaScript配合xlsx库以及file-saver来实现Excel文件的导出。首先,通过npm安装必要的依赖,如file-saver和xlsx。接着,在项目src目录下创建js文件夹,并添加Blob.js和Export2Excel.js两个文件。最后,展示了这两个关键文件的代码内容,以便读者理解和应用。

1.安装依赖

npm install -S file-saver xlsx
npm install -D script-loader

 

2.项目中src下新建一个js文件夹放入两个文件  Blob.js和 Export2Excel.js

 

3.使用

onExport:function(){
  // console.log('导出EXCEL');
  const list = this.$refs.workpage.tableData;
  require.ensure([], () => {
    const {export_json_to_excel} = require('../../../js/Export2Excel.js');
    const tHeader = ['手机号', '微信昵称'];   //自己定义输出的数据 这是表格头部
    const filterVal = ['mobile', 'nickname'];  //对应数据中的字段名称
    const data = this.formatJson(filterVal, list);
    export_json_to_excel(tHeader, data, '导出' + new Date().getDates());
  });
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
},

4.附上 Blob.js和 Export2Excel.js 两个文件

Blob.js

/* eslint-disable */
/* Blob.js
 * A Blob implementation.
 * 2014-05-27
 *
 * By Eli Grey, http://eligrey.com
 * By Devin Samarin, https://github.com/eboyjr
 * License: X11/MIT
 *   See LICENSE.md
 */

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
/*excel导入导出*/

(function (view) {
    "use strict";

    view.URL = view.URL || view.webkitURL;

    if (view.Blob && view.URL) {
        try {
            new Blob;
            return;
        } catch (e) {}
    }

    // Internally we use a BlobBuilder implementation to base Blob off of
    // in order to support older browsers that only have BlobBuilder
    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
            var
                get_class = function(object) {
                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
                }
                , FakeBlobBuilder = function BlobBuilder() {
                    this.data = [];
                }
                , FakeBlob = function Blob(data, type, encoding) {
                    this.data = data;
                    this.size = data.length;
                    this.type = type;
                    this.encoding = encoding;
                }
                , FBB_proto = FakeBlobBuilder.prototype
                , FB_proto = FakeBlob.prototype
                , FileReaderSync = view.FileReaderSync
                , FileException = function(type) {
                    this.code = this[this.name = type];
      
JS XLSX是一款非常流行的JavaScript库,可以实现Excel文件的读取、写入以及格式转换等功能。在使用JS XLSX导出图片时,我们可以采用以下的步骤。 首先,将图片转为Base64编码格式,然后使用JS XLSX提供的SheetJS.pngbase64函数将Base64编码转换为图像数据。将图像数据传给JS XLSX,就可以在Excel中插入图片了。 下面是一段示例代码,演示了如何使用JS XLSX导出图片。 ```javascript // 将图片转为Base64编码 const imgUrl = 'https://example.com/image.jpg'; const response = await fetch(imgUrl); const blob = await response.blob(); const reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = () => { const base64data = reader.result.split(',')[1]; // 去掉data:image/jpeg;base64, // 将Base64编码转为图像数据 const data = SheetJS.pngbase64(base64data); // 创建Excel文件 const wb = XLSX.utils.book_new(); const ws = XLSX.utils.book_append_sheet(wb, []); // 插入图片 XLSX.utils.sheet_add_aoa(ws, [[{ t: 's', v: 'Image:' }, { t: 's', v: '' }]]); XLSX.utils.sheet_add_aoa(ws, [['', { t: 's', v: imgUrl }]]); const imgRef = XLSX.utils.decode_range(ws['!ref']); XLSX.utils.sheet_add_image(ws, { imageData: data, type: 'png' }, `B${imgRef.e.r + 1}`); // 将Excel文件导出为二进制数据 const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([wbout], { type: 'application/octet-stream' }); // 下载Excel文件 const filename = 'image.xlsx'; if (navigator.msSaveBlob) { navigator.msSaveBlob(blob, filename) } else { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename; link.click(); URL.revokeObjectURL(link.href); } } ``` 以上就是如何使用JS XLSX导出图片的简单介绍,通过将图片转为Base64编码,再将Base64编码转为图像数据,就可以在Excel中插入图片了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值