上传下载

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1、上传文件？

• 点击上传文件，获取文件file，使用FormData.append添加参数
• 发送键值对形式（FormData）的post请求
• 后端返回接口上传成功或失败

// 上传文件
export function uploadFile(data) {
    return axios({
        url: '......',
        method: 'post',
        data,
    })
}

uploadFile(item) {
  let fileList = item.file
  let form = new FormData()
  form.append('file', fileList)
  // 添加需要传的参数，比如templateId
  form.append('templateId', this.templateId)
  // 请求方法
  this.$http.fileUpdate
    .uploadFile(form)
    .then(res => {
      ......
    })
    .catch(err => {
      console.error(err)
    })
},

2、下载文件？

• 发送带有参数的post请求，需要加上responseType: 'blob'
• 后端返回接口，接口内容是二进制流
• 提取二进制中的文件名
• 二进制流转blob 再通过URL.createObjectURL()转成URL
• 前端使用 <a href='url地址' download='文件名'> 标签下载

请求：

export const getExportForm = (url, data) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data,
        responseType: 'blob',
    })
}

返回接口：

export function exportData(response) {
  // 创建a标签
  const aTag = document.createElement('a');

  // 提取文件名
  const filename = response.headers['content-disposition'].split(';')[1].split('=')[1].split("''")[1];
  aTag.download = decodeURIComponent(filename);

  // 提取url地址
  const blob = response.data;
  aTag.href = URL.createObjectURL(blob);

  // 触发a标签
  document.body.appendChild(aTag);
  aTag.click();

  // 移除a标签
  URL.revokeObjectURL(aTag.href);
  document.body.removeChild(aTag);
}

3、下载页面以pdf格式打开？

• 设置要下载的内容区域，例如以下的 id = 'pdfDom'，将整个页面都下载

<template>
    <div class="overview-detail" id="pdfDom">
        <!-- ================= title ================= -->
        <div class="title-wrapper">
                <button
                    class="btn-download"
                    @click="btnDownload"
                >
                    {{ $t('全部下载') }}
                </button>
            </div>
        </div>   
    </div>
</template>
<script>
import {exportPDF} from 'src/common/htmlToPdf';

export default {
    name: 'detail-index',
    methods: {
        btnDownload() {
            exportPDF();
        }
    }
};
</script>

• 通过html2Canvas与JsPDF组合使用 htmlToPdf.js文件

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

export const exportPDF = () => {
    html2Canvas(document.querySelector('#pdfDom'), {
        // 允许图片跨域来污染
        allowTaint: true
    }).then(canvas => {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        // 一页pdf显示html页面生成的canvas高度;
        let pageHeight = (contentWidth / 592.28) * 841.89;
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
        // 页面偏移
        let position = 0;
        // a4纸尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL('image/jpeg', 1.0);
        let PDF = new JsPDF('', 'pt', 'a4');

        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        }
        else {
            while (leftHeight > 0) {
                PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                // 避免添加空白页
                if (leftHeight > 0) {
                    PDF.addPage();
                }
            }
        }
        PDF.save('测试.pdf');
    });
};