vue中文件下载功能实现

在浏览器内输入可以在线预览文件格式时,会直接展示文件预览内容,但是不支持的预览是直接下载文件的。所以浏览器不支持的预览的文件格式,可以直接通过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;
        },
        
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值