项目中下载本地引用的图片到客户端（2023-03-14）

[yaogengzhu]

下载本地图片

downloadLocalImg(Url: string) {
    const blob = new Blob([''], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = Url;
    const urlList = Url.replace(/(.*\/)*([^.]+.*)/gi, '$2').split('?');
    const [urlname] = urlList;
    a.download = urlname;
    const e = new MouseEvent('click', {});
    a.dispatchEvent(e);
    URL.revokeObjectURL(url);
  },
};

[yaogengzhu]

如果a标签打开一个链接打开预览的话，可以按以下解释处理

前端 -----> 图片url + '?response-content-disposition=attachment ' 即可

response-content-disposition=attachment 解释 response-content-disposition=attachment 是一个 HTTP 响应头字段，用于指示将响应的内容视为附件并将其下载到用户的计算机上，而不是在浏览器中直接显示。

当服务器向客户端发送文件时，可以通过设置 response-content-disposition=attachment 头来指示浏览器将文件下载到用户的计算机上。这通常用于传输二进制文件，如图像、音频、视频、文档等。

例如，当您在网站上点击“下载”按钮时，服务器会通过设置 response-content-disposition=attachment 头将文件下载到您的计算机上，而不是在浏览器中直接打开或显示文件。这可以确保文件的完整性和安全性，并方便用户保存和管理文件。