成都创新互联网站制作重庆分公司

vue中怎么使用xlsx插件下载内容默认居中的excel

这篇文章主要介绍“vue中怎么使用xlsx插件下载内容默认居中的excel”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue中怎么使用xlsx插件下载内容默认居中的excel”文章能帮助大家解决问题。

专业从事成都网站制作、做网站,高端网站制作设计,微信小程序,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务,采用HTML5+CSS3前端渲染技术,响应式网站开发,让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组,与您实时在线互动,随时提供解决方案,畅聊想法和感受。

概述

本文封装一个下载excel方法,下载的excel默认内容水平、垂直居中。

需要的依赖安装

npm i xlsx

npm i xlsx-style-medalsoft

npm i file-saver

这里说明下,xlsx-style-medalsoft这个依赖是掘金大神fork的xlsx-style的一个依赖,大神非常厉害,实现的功能非常多,原文链接:点击跳转大神链接

有问题直接去大神链接上咨询,我看不懂太厉害的代码。

正文

在main.js引入依赖,封装方法挂载到全局vue上。

引入依赖

import FileSaver from 'file-saver';

import XLSX from 'xlsx';

import XLSXS from 'xlsx-style-medalsoft';

封装downTable挂载到vue上,方便全局调用

Vue.prototype.downTable = function(tableID,fileName,widthList){

  let xlsxParam = {raw:true}

  // tableID为el-table的id名称

  let wb =XLSX.utils.table_to_book(document.querySelector("#"+ tableID),xlsxParam);

  // widthList为表格宽度数组,单位wpx,可以不传,数组格式如[{wpx:140},{wpx:150},…]

  let arr = [];

  if(widthList&&Array.isArray(widthList)){

    arr=widthList;

  }

  wb["Sheets"]["Sheet1"]["!cols"]=arr;

  let wbs = wb["Sheets"]["Sheet1"];

  // 每个单元格设置居中

  for(const key in wbs){

    if(key.indexOf("!") === -1 && wbs[key].v){

      wbs[key].s={

        alignment:{

          horizontal:"center",

          vertical:'center',

          wrap_text:true,

        }

      }

    }

  }

  // 获取二进制字符串作为输出

  let wbout = XLSXS.write(wb,{

    bookType:"xlsx",

    bookSST:true,

    type:"buffer",

  });

  // 下载

  try{

    FileSaver.saveAs(

      new Blob([wbout],{type:"application/octet-stream"}),

      // 设置导出文件名称

      fileName + ".xlsx"

    )

  }catch(e){

    if(typeof console !== "undefined") console.log(e.wbout);

  }

  return wbout

}

测试封装的方法

下载下面表格内容

代码

内容水平垂直居中了,基本满足了我们的要求,还可以传入宽度列表,让表格更好看一点。

改进代码

只需要点击事件加宽度列表数组

      @click="downTable('userInfo','员工信息表',[{wpx:120},{wpx:120},{wpx:120},{wpx:120},{wpx:200}])">

      下载

关于“vue中怎么使用xlsx插件下载内容默认居中的excel”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


当前文章:vue中怎么使用xlsx插件下载内容默认居中的excel
网站网址:http://cxhlcq.com/article/ggjjjh.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部