前端 用a标签下载图片

Question

前端 用a标签下载图片，设置名称无效，下载下来为file， 需要重新命名后才能打开

    const downloadQRCode = (e) => {
        var qrCodeUrl = apiPrefix + e.qrCode
        var name2 = `${e.name}.png`
        console.log(apiPrefix);
        console.log(qrCodeUrl);
        const link = document.createElement('a');
        link.href = qrCodeUrl;
        // link.download = `${e.name}.png`;
        link.setAttribute('download', name2);
        console.log(`${e.name}.png`);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        console.log(e);
    }

后来改成 Blob 设置 type: 'image/png'

    const downloadQRCode = (e) => {
        var qrCodeUrl = uuu + e.qrCode;
        var name2 = `${e.name}.jpg`;
        console.log(qrCodeUrl);
        let url = window.URL.createObjectURL(new Blob([qrCodeUrl], { type: 'image/jpg' }))
        let link = document.createElement('a')
        link.href = url
        link.style.display = 'none'
        link.download = name2 
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link); // 下载完成移除元素
        window.URL.revokeObjectURL(url);
    }

命名有效，但打开文件显示文件损坏

这是后端代码

Answer 1

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

你的代码存在两个问题，一个是名称和下载路径的问题，另一个是当文件损坏时如何处理。

首先，让我们解决这两个问题。

1. 在HTML中设置name属性

正确的写法是在link的href属性中添加"name"属性，例如：

<a href="https://example.com/apiQrcode?name=YourImageName&format=image/png">点击我</a>

然后，在JavaScript中使用以下方式更新name属性:

let url = window.URL.createObjectURL(new Blob([qrCodeUrl], { type: 'image/png' }));
let link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'YourImageName.png');
link.style.display = 'none';
link.download = name;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);

这将确保每个下载链接都有一个唯一的名称，并且当文件损坏时，可以正确地重命名以指向新的名称。

1. 当文件损坏时处理

你可以使用FileReader API来检测文件是否已损坏。如果文件已损坏，则不推荐使用blob作为文件内容。在这种情况下，应返回一个错误消息并从用户那里询问他们选择其他格式（例如，我们可以要求用户打开名为"SpecificErrorType.txt"的文件）。

你可以像这样修改后端代码:

const errorHandler = function(file) {
    if (!file.error && !file.type.startsWith('application/octet-stream')) {
        return 'File is not a valid image.';
    } else {
        return 'File is damaged and cannot be downloaded.';
    }
};

return function(qrCodeUrl, name2) {
    // ...
    let file = new FileReader();
    file.onerror = errorHandler;
    file.onloadend = function() {
        console.log('File loaded successfully.');
    };
    file.readAsDataURL(qrCodeUrl);
};

在上述代码中，我们定义了一个函数errorHandler，该函数检查文件是否正常读取。如果是，它将返回一个关于文件状态的消息；如果不是，它将返回一个有关文件损坏的消息。然后，我们使用FileReader API将qrCodeUrl转换为dataURL，并将其附加到下载请求中。