CODEWITHSUNDEEP
javascriptreactjspdf
23k
23k

Reputation: 1399

Open PDF data object in a new tab

We're re-doing PDF generation in one of our web applications and for the most part have switched over to jsPDF.

We have a single PDF that is returned from an external request which we then mask the url of and open it in a new tab.

Previously, we were displaying the PDF like this

<form target="_blank" action={'/pdf/company?ID=' + this.props.recordId + '&PAGE_ID=' + this.props.pageId}>
        <input type="hidden" name="PAGE_ID" value={this.props.pageId} />
        <input type="hidden" name="ID" value={this.props.recordId} />
        <input className="btn3" type="submit" value="Get PDF"/>
</form>

I'm able to make a successful request to the same endpoint

axios.get(`/pdf/company?ID=${record.id}&PAGE_ID=${this.props.pageID}`)
  .then(data => {
    console.log(data);
  });
}

And I receive back a response that looks like this

data: "%PDF-1.7\n%����\n7 0 obj\n<< /Type /Page /Parent 1 0 R /LastModified (D:20171227143403-05'00') /Resources 2 0 R /MediaBox [0.000000 0.000000 595.276000 841.890000] /CropBox [0.000000 0.000000 595.276000 841.890000] /BleedBox [0.000000 0.000000 595.276000 841.890000] /TrimBox [0.000000 0.000000 595.276000 841.890000] /ArtBox [0.000000 0.000000 595.276000 841.890000] /Contents 8 0 R /Rotate 0 /Group << /Type /Group /S /Transparency /CS /DeviceRGB >> /Annots [ 6 0 R ] /PZ 1 >>\nendobj\n8 0 obj\n<</Filter /FlateDecode /Length 2871>> stream\nx���v�6\u0016���\u0014����\u0010·��r�8�5u��3���^0\u0012,s\"�\u000eI�M�~6t )�\u0004{H���^�\u0015�����\u0007�\u0001\u0012\u0014�R\u0013�B׈�\u000f��\u001f��o�k\u0002?o�g���\u0019\u001a\u001dQD\u0019&�/tv�ޜ� O}���\u000fd�\u000f˧\u0019b7����\"�H­��X3),�������#F�xPL_\u0008�%��H�,�Jrm\u0008�\u001a��F\u000b��,Vdy�¡��Q�S�S�\u000c�Hk\u0004�\n�\u000b����ފ�q���n�3P��s�\u001e��Hy\u0004�M\u0018��{��\u007f֚a!��,�׻�QX7a��z�>\u0006k��\u0008\u000cb\n�u�<\u0002�&�0_���g-9f�1\"�|�[\u001e�u\u0013F��w�c�\u0016\u001cF\rj(\r�u�<\u0002�&�0_���g�\u0005�\u001aTP\u001d����(��0�|�[\u001f�5\u00130jP�D��C�\u0011X7a��:D�?k*�\u0011\u0014\u000f̯wˣ�n�\u0008��n}\u000c�D¨A\u0018\u000f̯C�\u0011X7a��:D�;ki%V\u0002\"�A�\u000e��`�\n#��\u0001�\u0018���DX!l����\u0011X7a\u0004�:H�?k�0�@dX~\u001d �º\t#�׻�1X+��0J���A�\u0008��0�|…"

I have tried a numerous amount of ways to open this PDF in a new tab and have yet to have any success.

How can I replicate the previous behavior without using the <form> tag. I essentially am clicking a button and would like to open a new tab with the PDF.

I use the term "data object", but I really don't know what type of response I am getting back here (which is why it's hard to find an answer to my problem).

Upvotes: 0

Views: 628

Answers (1)

random-forest-cat
random-forest-cat

Reputation: 35934

I might be missing something here, but why not just use a link open the pdf? 

const href = `/pdf/company?ID=${record.id}&PAGE_ID=${this.props.pageID}`
return (
  <a href={href} target="_blank">Open PDF in new tab</a>
)

The <form> element feels like overkill for a simple get request

The data object you are referring to is the data stream of the binary or pdf as encoded text. You will see the same thing if you attempt to open an image in a text editor.

https://en.wikipedia.org/wiki/Specials_(Unicode_block)#Replacement_character

Upvotes: 1

Related Questions