在新选项卡中打开PDF数据对象

时间:2017-12-27 19:42:30

标签: javascript reactjs pdf

我们正在其中一个Web应用程序中重新生成PDF,并且大部分都已切换到jsPDF。

我们有一个从外部请求返回的PDF,然后我们将其屏蔽并在新标签中打开它。

以前,我们正在显示这样的PDF

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

我能够向同一个端点发出成功的请求

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

我收到的回复看起来像这样

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�|…"

我已尝试了多种方法在新标签中打开此PDF并且尚未取得任何成功。

如何在不使用<form>标记的情况下复制以前的行为。我基本上是点击一个按钮,想要用PDF打开一个新标签。

我使用术语“数据对象”,但我真的不知道我回到这里的回复类型(这就是为什么我很难找到问题的答案)。

1 个答案:

答案 0 :(得分:1)

我可能会在这里遗漏一些东西,但为什么不使用链接打开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>
)

对于简单的获取请求,<form>元素感觉有点过分

您指的数据对象是二进制数据流或pdf数据流作为编码文本。如果您尝试在文本编辑器中打开图像,您将看到相同的内容。

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