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

Question

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

我们有一个从外部请求返回的 PDF，然后我们屏蔽该 PDF 的 URL 并在新选项卡中打开它。

之前，我们是这样显示 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 的新选项卡。

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

Answer 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>对于一个简单的 get 请求来说，元素感觉有点大材小用了

您所指的数据对象是二进制或pdf作为编码文本的数据流。如果您尝试在文本编辑器中打开图像，您会看到同样的情况。

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