使用 Axios 和 React 下载和操作 svg 文件

Question

我想下载到服务器，然后在我的应用程序中使用 svg 图像，使用 axios 作为后端，React 作为前端。我在服务器端编写了以下函数，它可以下载文件：

const https = require('https');
const fs = require('fs');

const downloader = (url, filename) => {
https.get(url, function(res){
    const fileStream = fs.createWriteStream(filename);
    res.pipe(fileStream);
    fileStream.on('finish', function() {
        fileStream.close();
        console.log('done');
                })
            })
};

downloader('https://www.humdes.com/local/tools/svg/?TYPE=calculation&KEY=proektor_1_3_b779c57622ad9891313a6046c1604cea', 'file.svg')

问题是，我现在不知道如何将它连接到我的 React 前端。说，我想创建一个在 ComponentDidUpdate 中运行的函数：

downloader(this.state.imagesource, this.state.filename) {
//???
}

此函数必须使用 url 和文件名下载文件。但是我必须在下载器函数中写什么才能使它与我的 axios 函数一起工作？之后如何访问下载的文件，比如从 svg 中删除一些元素并将其余元素作为图像插入到我的组件中？

Answer 1

  downloadFile(){
    fetch('/yourrul')
    .then((res)=>res.blob())
    .then((blob)=>{
      let url=  URL.createObjectURL(blob);
      let pom = document.createElement('a');
      pom.setAttribute('href',url)
      pom.setAttribute('download', 'yourfilename.extention');
      pom.click(); // this will download the file
    })
  }