前端下载文件方式(Blob)

最新推荐文章于 2024-01-03 09:06:03 发布

小白目

最新推荐文章于 2024-01-03 09:06:03 发布

阅读量508

点赞数

分类专栏：实用工具文章标签：前端

本文链接：https://blog.csdn.net/qq_37974755/article/details/132412930

版权

实用工具专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文介绍了如何在JavaScript中，通过创建`a`元素并设置`download`属性，实现点击按钮下载SVG文件的示例。代码展示了如何处理icon对象，生成URL并触发下载。

摘要由CSDN通过智能技术生成

以下以下载图标svg文件为例，实现点击按钮下载文件，其中icon结构如下：

const DownloadSvg = (props) => {
    function download(downfile) {
        const tmpLink = document.createElement("a");
        const objectUrl = URL.createObjectURL(downfile);
        tmpLink.href = objectUrl;
        tmpLink.download = downfile.name;
        document.body.appendChild(tmpLink);
        tmpLink.click();
        document.body.removeChild(tmpLink);
        URL.revokeObjectURL(objectUrl);
    }
    return <div>
        <Button className='center-field' onClick={() => {
            const { icon } = props
            console.log(icon);
            // window.open打开新页签进行文件预览 可手动下载
            // window.open(icon.url)
            const file = new File([icon.icon_svg], `${icon.font_class}.svg`, {
                type: "image/svg",
            });
            download(file)
        }} >
            点击下载图标svg</Button>
    </div>
}