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

Question

我想下載到服務器，然后在我的應用程序中使用 svg 圖像，使用 axios 作為后端，React 作為前端。 我在服務器端編寫了以下 function 並且可以下載文件：

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 中運行的 function：

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

此 function 必須使用 url 和文件名下載文件。 但是我必須在下載器 function 中寫什么才能使它與我的 axios function 一起工作？ 之后如何訪問下載的文件，例如，從 svg 中刪除一些元素並將 rest 作為圖像插入到我的組件中？

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 }) }