上传下载导出功能

一.导出为图片

1.引入html2Canvas

import html2Canvas from 'html2canvas';

2.导出的方法

   exportImg(DivID){
       html2Canvas(this.$refs[DivID]).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        if (dataURL !== "") {
            var a = document.createElement('a')
            a.download = "导出的图片名";
            a.href = dataURL;
            a.click()
        }
      })
    },

3.导出按钮

    <el-button @click="exportImg('rmcl-analysis')">导出</el-button>

4.需要导出的页面

 <div class="rmcl-analysis" ref="rmcl-analysis">
 </div>

二、点击文字链接下载

1.不可修改文件名

window.open('链接')

2.可修改文件名

import { getFileDownloadUrl } from "@/_public/utils/index";
...下为utils/index封装的拼链接的方法...
当返回的url为此种类型时 ,需拼完整url  ""group1/M00/01/ED/CsA1T2Jft7yAB5rUUAFdIctY61.xlsx""
export function getFileDownloadUrl(url) {
  return window.location.origin + window.SITE_CONFIG.proxyName + '/' + url
}

downloadfile(row) {
      let fileUrl = getFileDownloadUrl(row.fileName);
      let fileName = row.attachmentName
      let element = document.createElement('a');
      element.style.display = 'none';
      element.setAttribute('href', fileUrl);
      element.setAttribute('download', fileName);
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    },

三.上传附件

    //上传之前判断文件大小，以及文件格式是否正确
    beforeUpload(file) {
      console.log(file);
      if (file.type != "" || file.type != null || file.type != undefined) {
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        console.log(FileExt);
        const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制
        if (!isLt5M) {
          this.upFormVisible = false;
          this.$message({
            type: "warning",
            message: "上传文件大小不能超过 50MB!"
          });
          return false;
        }
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.upFormVisible = false;
          this.$message({ type: "warning", message: "上传文件格式不正确!" });
          return false;
        }
      }
    },

  //上传文件接口
    uploadFile(item) {
      let FormDatas = new FormData();
      FormDatas.append("file", item.file);
      axios({
        method: "post",
        url: `/epdp/air/air-jp-import-record/import-data/${this.form.constructionSite}`,
        headers: this.headers,
        timeout: 30000,
        data: FormDatas
      }).then(res => {
        this.$set(this.form, "fileName", res.data.result);
      });
    },