导出功能 v0.0.2

喜马拉洋

已于 2022-10-23 10:09:59 修改

阅读量539

点赞数

文章标签： javascript 前端开发语言

于 2020-11-16 10:06:57 首次发布

本文链接：https://blog.csdn.net/qq_41325770/article/details/109714561

版权

导出功能

在项目开发的过程中，我们经常需要实现文件导出功能。导出文件的格式包括word,excel，pdf等。

1.导出excel

1.1 纯前端导出excel

 使用插件js-export-excel

	import ExportJsonExcel from "js-export-excel";
	let option={};
	//文件名称
   	option.fileName = query.surveyName||'excel';
   	//表格数据
      option.datas=[
         {
         //第一个sheet
           sheetData:midArr,
           sheetName:'调查牛肉状况',
           columnWidths:[10,10,10,10,10,10,10],
           //表头
           sheetHeader:['题型','内容','选项','小计','回复比例','结果排序',"图表类型"]
         },
       ]
  	 var toExcel=new ExportJsonExcel(option);
   toExcel.saveExcel();

1.2 前后端导出excel

export const handleExport = (payload) => {
axios({
  method: 'get',
  url: `url`,
  responseType: 'arraybuffer',
}).then(res => {
  // 创建下载的链接
  console.log(res)
   // 设置该文件的mime类型，这里对应的mime类型对应为.xlsx格式 
  const url = window.URL.createObjectURL(new Blob([res.data],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}));
  const link = document.createElement('a');
  link.href = url;
  // 从header中获取服务端命名的文件名
  const fileName =decodeURI(res.headers['content-disposition'].split(";")[1].split("filename=")[1]);
  link.setAttribute('download', fileName);
  document.body.appendChild(link);
  link.click();
});
};

2.导出word

2.1 html页面导出为word(react)

引入插件 file-saver

import FileSaver from 'file-saver';
   handleexport = (title)=>{
      // let str =this.HTMLDOMtoString(document.getElementById("export"));
      // 要导出的html 转化为字符串格式
      let str = this.HTMLDOMtoString();
      // style为字符串的格式，padding经测试会失效
      let style = ".secTitle___1VMNm{margin-top: 30px;height: 20px;font-size: 14px;color:rgba(0,0,0,.5);}"+".checked___bOUzZ{color:green;}"
      let html = this.getModelHtml(str,style)
      let blob = new Blob([html],{type:"application/msword;charset=utf-8"});
      FileSaver.saveAs(blob, `${title}.doc`);
  }

   HTMLDOMtoString = () => {
      // const div = document.createElement("div")
      const div = document.getElementById("export")
      // div.appendChild(HTMLDOM)
      return div.innerHTML
  }

  	getModelHtml =(mhtml,styles) => {
      return `
          Content-Type: text/html; charset="utf-8"
        <!DOCTYPE html>
        <html>
        <head>
        <style>
          ${styles}
        </style>
        </head>
        <body>
          ${mhtml}
        </body>
        </html>
          `
  }

3. 导出(下载)项目本地文件

使用场景: 下载某个模版文件供操作者使用，但是这种下载如果文件需要不停的更改那么就需要不断的去更改代码引入文件

react vue 框架中一般自带public目录，此目录下的文件会直接输出到webpack的输出路径中
那么就可以将文件放入此目录

		  const downloadElement = document.createElement('a');
       downloadElement.style.display = 'none';
       // 因为public文件会直接输出到输出路径中，所以与打包后的js文件同级别
       downloadElement.href = './3201322.pdf';
       downloadElement.download = '111.pdf'; // 下载后文件名
       document.body.appendChild(downloadElement);
       downloadElement.click(); // 点击下载
       document.body.removeChild(downloadElement); // 下载完成移除元素

喜马拉洋

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
导出功能 v0.0.2

导出功能在项目开发的过程中，我们经常需要实现文件导出功能。导出文件的格式包括word,excel，pdf等。1.导出excel1.1 纯前端导出excel 使用插件js-export-excel import ExportJsonExcel from "js-export-excel"; let option={}; //文件名称 option.fileName = query.surveyName||'excel'; //表格数据 option.datas=[
复制链接

扫一扫