文件的预览，上传和下载

1.文件的预览

我这里预览的话需要用到一个依赖包docx-preview，版本是^0.3.6。然后引入这个包里的renderAsync方法。

import { renderAsync } from "docx-preview";

预览的话首先需要一个容器去作为预览的位置。

<div id="preview" class="preview"></div>

我们获取文件流以后，先用blob去处理文件流，然后就直接用renderAsync方法就好了，方式如下：

getDataApi(params).then(async (res) => {
  // 获取到文件流
  this.file = res;
  // 用blob处理文件流
  const blob = new Blob([this.file]);
  // renderAsync方法去预览文件
  renderAsync(blob, document.getElementById("preview"), null, {
    useBase64URL: true, // 关键：启用 Base64 图片
    ignoreLastRenderedPageBreak: true,
  });
});

后端返回的文件流长这样：

2.文件的下载

loadDownDayaExcel() {
  const params = { dataTime: this.condition.dataTime };
  downloadApi(params).then((res) => {
    this.dayaExcelFile = res;
    const blob = new Blob([this.dayaExcelFile]); // 把得到的结果用流对象转一下
    var a = document.createElement("a"); //创建一个<a></a>标签
    a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
    a.download = `日报数据【区域-日前：${this.condition.dataTime}】.xlsx`; //设置文件名
    a.style.display = "none"; // 障眼法藏起来a标签
    document.body.appendChild(a); // 将a标签追加到文档对象中
    a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
    a.remove(); // 一次性的，用完就删除a标签
  });
},

这里注意一下，通过接口获取文件流的时候，一定记得要加上responseType: "blob"

export function downloadApi(data) {
  return http({
    method: "POST",
    url: `/pms/RtBiz_Srv/rest/agentDailyPaper/download`,
    data,
    responseType: "blob",
  });
}

3.文件的上传

我这用到了el-upload组件。

<el-upload
  class="ml10"
  ref="upload"
  name="uploadFile"
  action="#"
  accept=".xlsx, .xls"
  multiple
  :file-list="formMap.fileList"  // 上传的文件列表
  :show-file-list="false"  // 是否展示上传的文件
  :before-upload="beforeUploadHandle"  // 上传之前的操作
  :http-request="httpRequestHandle"  // 上传操作
  :on-change="handFileChange"  // 上传文件改变的操作
  :on-success="handleSuccess"  // 上传后的操作
>
  <el-button icon="iconfont icon-daochu1" type="primary"
    >上传</el-button
  >
</el-upload>

上传用到的变量

// 上传文件的信息
formMap: {
  fileList: [],    // 哪些文件
  uploadNum: 0,    // 数量
},
// 要上传的文件
uploadFile: [],

上传用到的方法

beforeUploadHandle(file) {
  return new Promise((resolve, reject) => {
    const fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
    const whiteList = ["xlsx", "xls", "docx", "doc"];  // 设置文件类型
    if (whiteList.indexOf(fileType) === -1) {
      this.$message.warning(
        "请上传后缀为.xlsx, .xls, .docx, .doc的excel格式文件"
      );
      return reject(false);
    } else {
      return resolve(true);
    }
  });
},

httpRequestHandle(File) {
  this.uploadFile.push(File.file);
  if (
    this.formMap.uploadNum !== 0 &&
    this.uploadFile.length === this.formMap.uploadNum
  ) {
    // 处理要上传的文件
    const formData = new FormData();
    this.uploadFile.forEach((val) => {
      formData.append("file", File.file);
    });
    batchImportExcel(formData)
      .then((res) => {
        if (res.successful) {
          this.$message.success(res.resultValue);
        } else {
          this.$message.error(res.resultHint);
        }
        this.uploadFile = [];
        this.formMap.fileList = [];
        this.formMap.uploadNum = 0;
      })
      .catch(() => {
        this.uploadFile = [];
        this.formMap.fileList = [];
        this.formMap.uploadNum = 0;
      });
  }
},

handleSuccess() {
  this.formMap.uploadNum++;
},

handFileChange(file, fileList) {
  const ele = document.getElementsByName("uploadFile");
  if (ele && ele.length > 0 && this.formMap.uploadNum === 0) {
    this.formMap.uploadNum = ele[0].files.length;
    return false;
  }
},

上传的接口

// 上传
export function batchImportExcel(data) {
  return http({
    method: "POST",
    url: `/pms/RtBiz_Srv/rest/upload/uploadfile`,
    data,
  });
}