html 如何做下载文件

以下是关于HTML如何做下载文件的详细内容：

使用<a>标签实现下载

使用JavaScript实现下载

（一）通过创建<a>元素并模拟点击实现下载

function downloadFile(url, filename) {
    var a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
// 调用示例
downloadFile('file.pdf', 'myfile.pdf');

• 原理：动态创建一个<a>元素，设置其href属性为要下载文件的URL，download属性为指定的文件名，然后将该元素添加到文档中并模拟点击，从而实现文件下载，最后再将该元素从文档中移除。
• 优点：可以在用户进行某些操作后自动触发下载，灵活性较高。
• 缺点：部分浏览器可能会对这种动态创建的元素有安全限制，导致下载失败。

（二）使用XMLHttpRequest实现下载

function downloadFile(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText);
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
}
// 调用示例
downloadFile('file.csv', function(fileContents) {
    // 处理文件内容，例如将其转换为Blob对象并触发下载
    var blob = new Blob([fileContents], { type: 'text/csv' });
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'downloaded.csv';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

• 原理：使用XMLHttpRequest对象发送GET请求获取文件内容，然后在回调函数中处理文件内容，可以将文件内容转换为Blob对象，再通过创建<a>元素并设置其href和download属性来实现下载。
• 优点：可以在不刷新页面的情况下下载文件，并且可以对文件内容进行处理后再下载。
• 缺点：代码相对复杂，需要处理异步请求和文件内容的转换。

服务器端生成文件并触发下载

（一）后端接口生成文件并返回给前端

• 前端代码示例：

import { downloadFile } from '@/api/download.js'; // 下载接口
// 根据拿到的数据id下载对应数据文件
function downloadBtn(row) {
    downloadFile(row.id).then(res => {
        if (!res.code) {
            let type = row.type; // 根据数据的类型下载对应的文件类型，如果确定文件类型可以固定
            const downloadElement = document.createElement('a');
            const href = window.URL.createObjectURL(res);
            downloadElement.href = href;
            downloadElement.download = `${row.name}.${type}`;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
        } else {
            this.$Message.error('下载文件失败!');
        }
    }).catch(error => {
        this.$Message.error('下载文件失败!');
    });
}

• 后端接口示例（以axios为例）：

export const downloadFile = (id) => {
    return axios({
        url: `Your download URL/${id}`,
        method: 'post',
        headers: {
            'Content-Type': 'application/json; application/octet-stream'
        },
        responseType: 'blob', // 请求返回的数据类型为Blob
        timeout: 0
    });
}

• 原理：前端通过调用后端接口，传递相关参数（如文件ID等），后端根据参数生成文件并返回给前端，前端接收到文件数据后，创建一个<a>元素，将文件数据转换为URL并设置为<a>元素的href属性，同时指定download属性为文件名，然后模拟点击该元素实现下载。
• 优点：适用于需要从服务器动态生成文件的场景，如根据用户输入生成报表、定制数据文件等。
• 缺点：需要前后端配合，开发成本相对较高。

文件下载加进度条

（一）前端代码示例

<button id="downloadBtn" onclick="downloadBtn(row)">下载文件</button>
<Progress :percent="progress.progress" :stroke-width="20" :status="progress.status" text-inside />

downloadBtn(row) {
    downloadFile(row.id, this.downFileProgress).then(res => {
        // ...
    });
}
downFileProgress(progress) {
    let currentProgress = progress.loaded  1; // 获取已下载的字节数
    if (this.totalProgress) {
        this.totalProgress += currentProgress;
    } else {
        this.totalProgress = currentProgress;
    }
    let rate = (((this.totalProgress currentProgress) / this.totalProgress)  100).toFixed(2)  1;
    this.progress.progress = rate;
}

• 原理：在下载文件的过程中，通过监听下载进度事件获取已下载的字节数，然后根据总字节数计算下载进度百分比，并实时更新进度条的显示。
• 优点：提升用户体验，让用户清楚了解文件下载的进度，尤其在下载大文件时非常有用。
• 缺点：需要额外的代码来处理进度计算和进度条的更新，增加了代码复杂度。

相关问答FAQs

为什么有些文件点击下载链接后直接打开了而不是下载？

答：这是因为浏览器默认支持某些文件类型的直接打开，如PDF、图片、文本文件等，如果要让这些文件点击链接后直接下载而不是打开，需要给<a>标签添加download属性。<a href="file.pdf" download>下载PDF文件</a>，这样浏览器就会直接下载文件而不是尝试打开它。

如何使用JavaScript下载Blob类型的文件？

答：可以使用以下步骤来下载Blob类型的文件：

• 获取Blob对象的数据,这可以通过多种方式，如从服务器获取、在前端生成等。
• 创建一个<a>元素，并使用window.URL.createObjectURL()方法将Blob对象转换为一个URL，将其赋值给<a>元素的href属性。
• 设置<a>元素的download属性为要保存的文件名。
• 将<a>元素添加到文档中并模拟点击，触发下载。

var blob = new Blob(['Hello, world!'], { type: 'text/plain' });
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'hello.txt';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);