I can download a pdf with postman from my backend but not with axios in Vue

Question

First I want to bring my problem closer to you, I try to generate a .pdf in my backend(spring boot) and then download it via my webapp, which is programmed in vue. So far so good, I have my interface ready so far, I can generate a pdf and download it, at least via postman, if I send the request via postmann and then download it, everything is as it should be, if I do it via vue using axios I get an empty file back.

I looked at the files with the text editor and this is what I came up with (for simplicity I'll put in the first few lines as those are the only ones with unknown characters)

File from my backend which i downloaded with postman:

%PDF-1.4
%����
4 0 obj
<</Filter/FlateDecode/Length 1018>>stream
x����n�6����V�$Eꏯ��^�!1�Ym��Pb�Rg�)%�i�o�ћ=F/vh�����w�G����2J8�I��u�Ȃ��ǀ`�}�~�P�n�?�"h�J����@����[�&B�|<�*�wAP�_j�G�q�MF�06�q�>���Z���ԡ�Ќg  ��8 ]�%�]�66H(ӓ�UE���S�Et�
��,E���
"��i�*�_��d0LԶ^�g�N���p:v�����-cǻ��AÔ|а�e�xW:���PGY͢�Q���Bs�*�eu�㵬ڮo6����}��k8ʎ��f�c6p+�>Uwr�a  Ñ�\���vSH(�A��Yex����W����e����XϻF��]y+�{%�J��)֘YK§�iD�S㭣3RC!

File from the frontend which I downloaded with axios:

%PDF-1.4
%‚„œ”
4 0 obj
<</Filter/FlateDecode/Length 1018>>stream
xúïóﬂn€6∆ÔıÇV≥$EÍèØÜ†^÷!1⁄YmÅªPb Rg…)%µiûoÔ—õ=F/vhëÜèÕﬂwŒGëÃ«‡2J8≈IÇ≤u∞»Ç◊¡«Ä`∆}˙~ˇPÇnÇ?ˇ"hÑJà–„Î@à≥ƒ∆[á&BÍ|<å*ÉwAP§_j§GÖqÑMFß06çqî>çÜ°Z®“”‘°á–åg   ¡°8 ]û%‡]å66H(”ì–UEÑßÑSéEt∫
ú¬,E£Çç
"¡—iË*§_á…d0L‘∂^Íg∞N°éÕp:v¶‡ÉÑç-c«ª∆¿A√î|–∞±eÏxW:Û˘ØPGYÕ¢˝QîÜòBs¿*ìeu„µ¨⁄Æo6≤ôˇî}–˝k8 é∏ßfêc6p+©>Uwräa √ëÀ\™æÎvSH(†AèÚºYexä–ŒÍW≤ÕÎŒeÿ˜ÕXœªFñ˘]y+€

To be honest I don't know why it works with postman, I just gave my jwt token and send a get request to the url and it works, but unfortunately not with Axios, somehow it encrypts my file wrong, this also happens if i am using the request package or any other package responsible for sending requests.

But now to my code in the frontend:

methods:{
    downloadBill() {
      let config = {
        headers: {
          Authorization: sessionStorage.token,
          Content_Type: 'application/pdf;charset=UTF-8',
          responseType: 'arraybuffer',
          responseEncoding: 'binary'
        }
      }
      axios
          .get(this.$url+'/bill/'+this.$route.query.name,config)
          .then(response => {
            var sampleArr = this.base64ToArrayBuffer(response.data);
            this.saveByteArray("test", sampleArr);
          }).catch(console.error)
    },
    base64ToArrayBuffer(base64) {
      console.log(base64)
      var binaryString = window.atob(base64);
      var binaryLen = binaryString.length;
      var bytes = new Uint8Array(binaryLen);
      for (var i = 0; i < binaryLen; i++) {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
      }
      return bytes;
    },
    saveByteArray(reportName, byte) {
      var blob = new Blob([byte], {type: "application/pdf"});
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      var fileName = reportName;
      link.download = fileName;
      link.click();
    }

First of all the two methods, base64ToArrayBuffer and saveByteArray, are from a guy called Jahongir Rahmonov, i copied the two methods from this question

I also tried responseType: "blob", after reading through stack overflow but this would not change anything on the outcome.

I would like to thank you in advance for your help, I hope it's not a stupid mistake I overlooked

I can download a pdf with postman from my backend but not with axios in Vue

0 Answers0