Question

我一直在努力解决这个问题，需要你的帮助！我正在尝试简化从我的网站下载报告的过程。对于node，使用readStream非常简单，如下所示：

router.post('/report', (req, res) => {
    const filename = 'test.png';
    const filePath = path.join(__dirname, filename);
    fs.exists(filePath, exists => {
        if (exists) {
            const stat = fs.statSync(filePath);
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'Content-Length': stat.size,
                'Content-Disposition': 'attachment; filename=' + filename,
            });
            fs.createReadStream(filePath).pipe(res);
        } else {
            res.writeHead(400, { 'Content-Type': 'text/plain' });
            res.end('ERROR File does NOT Exists');
        }
    });
});

现在，如果我使用Postman或其他API测试程序进行尝试，它可以正常运行，文件可以正确下载和保存。现在我正在努力让这个工作我的前端。我目前正在运行AngularJS，并尝试使用FileSaver.js作为获取此数据并保存的方法，但它永远不会有效。文件已保存，但数据无法读取，也就是图像预览器显示图像已损坏。我想我正在错误地创建Blob？

function exportReport(_id) {
    this.$http
        .post(
            '/api/report',
            { _id },
            {
                headers: {
                    'Content-type': 'application/json',
                    Accept: 'image/png',
                },
            }
        )
        .then(data => {
            console.log(data);
            const blob = new Blob([data], {
                type: 'image/png',
            });
            this.FileSaver.saveAs(blob, 'testing.png');
        });
}

控制台日志结果如下：

Object {data: "�PNG
↵↵
IHDRRX��iCCPICC Profi…g�x @� @������Z��IEND�B`�", status: 200, config: Object, statusText: "OK", headers: function}

我想要解码object.data？

Answer 1

尝试将responseType: 'blob'添加到请求中，并省略创建新blob：

function exportReport(_id) {
    this.$http
        .post(
            '/api/report',
            { _id },
            {
                headers: {
                    'Content-type': 'application/json',
                    Accept: 'image/png',
                },
                responseType: 'blob'
            }
        )
        .then(data => {
            console.log(data);
            this.FileSaver.saveAs(data.data, 'testing.png');
        });
}

使用客户端Javascript

1 个答案: