从 api 响应获取 pdf 文件

Question

我正在调用 api 并获取 pdf 作为回报。fetch(`api` + guid, {   method: "GET",   headers: {    "Accept": "application/octet-stream",    "Authorization": "Bearer " + token,   },   responseType: 'arraybuffer',}).then((res) => res.text()).then((data) => {    fs.writeFileSync('file.pdf', data);});我收到了 pdf 文件，但问题是 pdf 文件始终为空。但是当我接受 json 响应时，它工作正常。我发现了类似的问题，但没有一个解决方案对我有用。如果有人能指出这个问题那就太好了。

Answer 1

我发现了这个问题。因为我使用的是 fetch 而不是 Axios。我们无法将responseType 作为 Fetch 的选项传递。

fetch(`api` + guid, {

   method: "GET",

   headers: {

    "Accept": "application/octet-stream",

    "Authorization": "Bearer " + token,

   },

   // responseType: 'arraybuffer' //#1 remove this,

})

相反，响应本身可以作为数组缓冲区传递，如下所示。

.then((res) => res.arraybuffer())

代替

.then((res) => res.text())

现在不要直接使用响应来编写我们的 pdf 文件。我们可以将数据更改为 base64 字符串，然后再次将其解码以创建 pdf 文件。我使用base64ToPdf npm 包来处理这个问题。

.then(data => {

  var base64Str = Buffer.from(data).toString('base64');

  base64.base64Decode(base64Str, "file.pdf");

})

我希望这对其他人有帮助。:)

Answer 2

    Change res.arraybuffer() to  res.arrayBuffer()

Below is the working code with webdriverio-

  var headers = {

            Authorization: "Bearer " + accessToken,

            Accept: 'application/pdf'

        }

       

           fetch(

                apiurl,

                {

                    headers: {

                        Accept: "application/octet-stream",

                        Authorization: "Bearer " + accessToken

                    },

                },

            )

                .then((res) => {

                    if (!res.ok) {

                        return res.status.toString()

                    }

                    return res.arrayBuffer()

                })

                .then((data) => {

                    var base64Str = Buffer.from(data).toString('base64');

                    base64.base64Decode(base64Str, filename);

                })

                .catch(

                    (err) => {

                        return err.Message;

                    })

Answer 3

这是对我有用的示例：

async createPdf(context, data) {

    let url = new URL(baseURL + '/invoice/createPdf');

    url.search = new URLSearchParams({

        id: data

    })

    await fetch(url, {

        method: 'GET',

        headers: {

            'Authorization': "Bearer " + localStorage.getItem("jwt"),

            'Accept': 'application/octet-stream'

        },

    }).then((res) => res.arrayBuffer())

        .then(data => {

            var base64Str = Buffer.from(data).toString('base64');

            var binaryString = window.atob(base64Str);

            var binaryLen = binaryString.length;

            var bytes = new Uint8Array(binaryLen);

            for (var i = 0; i < binaryLen; i++) {

                var ascii = binaryString.charCodeAt(i);

                bytes[i] = ascii;

            }

            var arrBuffer = bytes;

            var newBlob = new Blob([arrBuffer], { type: "application/pdf" });

            if (window.navigator && window.navigator.msSaveOrOpenBlob) {

                window.navigator.msSaveOrOpenBlob(newBlob);

                return;

            }

            data = window.URL.createObjectURL(newBlob);

            var link = document.createElement('a');

            document.body.appendChild(link);

            link.href = data;

            link.download = "Faktura.pdf";

            link.click();

            window.URL.revokeObjectURL(data);

            link.remove();

        })

Answer 4

就我而言，响应与您的相同，我正在尝试将其转换为 pdf 文件，以便我可以在 UI 上预览它。

为此，我需要获取响应中已存在的 blob 类型的 URL...以获取我所做的 URLURL.createObjectURL(myblob)

const [url,seturl] = useState('');

response

  .then((resp) => resp.blob())

  .then((myBlob) => {

    seturl(URL.createObjectURL(myBlob)); //<-- use this for fetching url from your response

    console.log(myBlob);

  })

  .catch((err) => {

    console.log(err.message());

  });