vue中文件下载功能实现

逃离我推掉我的手 2022-09-06 00:22 141阅读 0赞

在浏览器内输入可以在线预览文件格式时，会直接展示文件预览内容，但是不支持的预览是直接下载文件的。所以浏览器不支持的预览的文件格式，可以直接通过`a`标签来下载，但是支持预览的文件，就需要进行一次处理才可以实现下载。

/**
             * @description: 将下载链接转换为blob链接
             * @param {*} url 下载链接
             * @param {*} filename 文件名称
             * @return {*}
             */
            handlePdfLink(url, filename) {
                fetch(url, {
                    method: 'get',
                    responseType: 'arraybuffer',
                }).then((res) => {
                    if (res.status !== 200) {
                        return res.json();
                    }
                    return res.arrayBuffer();
                }).then((blobRes) => {
                    const e = new Blob([blobRes], {
                        type: 'application/octet-stream',
                        'Content-Disposition': 'attachment',
                    });
                    // 将 Blob 对象转为 url
                    const link = window.URL.createObjectURL(e);
                    this.handleFileDownload(link, filename);
                });
            },
             /**
             * @description: 下载文件
             * @param {*} url   下载链接
             * @param {*} filename 下载文件名称
             * @return {*}
             */
            handleFileDownload(url, filename) {
                // 创建 a 标签
                const link = document.createElement('a');
                link.href = url;
                link.download = filename;
                link.click();
                this.fullscreenLoading = false;
            },