Vue中下载或打开文件的JavaScript方法

yzy852026-09-22 10:05

1、根据url下载，可以打开图片、pdf，其他直接下载，不打开新标签页

javascript 复制代码

downloadFile (data, url, name, mimeType) {
            // 允许直接在浏览器打开的后缀
            const openExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.pdf',];
            const ext = name ? name.slice(name.lastIndexOf('.')).toLowerCase() : '';
            const a = document.createElement('a');
            a.href = getFileUrl(url);
            if (openExts.includes(ext)) {
                // 图片 / PDF：新标签页打开
                a.target = '_blank';
                a.rel = 'noopener noreferrer';
            } else {
                // 其他文件：触发下载
                a.download = name || '';
            }

            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        },

2、根据url下载，浏览器自行判断是打开还是下载，默认打开新标签页，会自动关闭

javascript 复制代码

downloadFile3 (data) {
            //该方法有可能在浏览器直接打开文件
            const a = document.createElement('a');
            a.href = data.sourceDocumentUrl;
            a.target = '_blank';
            a.download = data.sourceDocumentName || '';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        },

3、根据url下载，直接下载，不打开标签页

javascript 复制代码

 downloadFile2 (data, url, name) {
            //通过JavaScript来实现下载，创建Blob对象的方式，可以绕过浏览器默认打开PDF文件的行为，强制进行下载
            return request({
                url: getFileUrl(url),
                method: "get",
                responseType: "blob",
            }).then((res) => {
                const blob = res;
                const a = document.createElement("a");
                const url = window.URL.createObjectURL(blob);
                a.href = url;
                a.download = name || "下载文件";
                a.click();
                window.URL.revokeObjectURL(url);
            });
        },