js下载svg文件和预览svg文件

最新推荐文章于 2024-03-28 19:30:00 发布

木蓝茶陌*_*

最新推荐文章于 2024-03-28 19:30:00 发布

阅读量310

点赞数 3

分类专栏： JS 文章标签： javascript js下载svg文件 js预览svg文件下载svg文件预览svg文件

本文链接：https://blog.csdn.net/jyn15159/article/details/136649638

版权

JS 专栏收录该内容

88 篇文章 0 订阅

订阅专栏

js下载svg文件和预览svg文件

下载svg文件：

// 下载svg文件
downloadSvg (name) {
    // 后端接口，返回svg文件流，name为svg文件名称
    downloadFiler(name)
        .then((res) => {
        // console.log("downloadFiler ~ res:", res)
        const downloadUrl = window.URL.createObjectURL(
            // new Blob() 对后端返回文件流类型处理
            new Blob([res], {
                type: "image/svg+xml"
            })
        );
        // 创建a标签
        const link = document.createElement("a");
        // 对处理后的文件进行a标签绑定
        link.href = downloadUrl;
        link.setAttribute("download", name);
        document.body.appendChild(link);
        link.click();
        link.remove();
    })
        .catch((error) => {
        // console.log("downloadFiler ~ error:", error)
    });
},

预览svg文件：

// 预览svg文件
previewSvg (name) {
    // 后端接口，返回svg文件流，name为svg文件名称
    downloadFiler(name)
        .then((res) => {
        // console.log("downloadFiler ~ res:", res)
        const downloadUrl = window.URL.createObjectURL(
            // new Blob() 对后端返回文件流类型处理
            new Blob([res], {
                type: "image/svg+xml"
            })
        );
        // 在浏览器打开新窗口预览svg文件
        window.open(downloadUrl)
    })
        .catch((error) => {
        // console.log("downloadFiler ~ error:", error)
    });
},