4

My aim is to have a form that submits a URL to an endpoint that returns a base64 encoding of a PDF that is shown on screen without a window.open popup.

Example output I want: https://s.natalian.org/2017-04-04/index.html Desired output, a Web page with an embedded PDF

I'm confused how to use the resulting objectURL to show the data:application/pdf;base64 response.

With https://s.natalian.org/2017-04-04/ObjectURL.html I assume I am not decoding the base64 response properly? I don't know how to get it to render as a PDF like the output I want above.

hendry
  • 9,725
  • 18
  • 81
  • 139
  • `blob ?` - well, what does the server return? if it's a blob, return `response.blob()` to the next `.then` (that you don't yet have) in the chain – Jaromanda X Mar 06 '17 at 02:49
  • server returns base64 – hendry Mar 06 '17 at 02:57
  • so what do you need? a blob? a dataURI? something else? You don't have any code to show the result "on the screen", so, how are you going to do that? – Jaromanda X Mar 06 '17 at 03:09
  • I could use window.open, but I don't want to use that since it results in a popup in Chrome and doesn't work at all in Safari. – hendry Mar 06 '17 at 03:11
  • two other options are an ` – Jaromanda X Mar 06 '17 at 03:12
  • Can't get object to work https://jsfiddle.net/kaihendry/h0u4vLn3/7/ – hendry Mar 06 '17 at 12:57
  • URL at `fetch()` at jsfiddle responds with `502` error – guest271314 Mar 12 '17 at 19:12
  • Is an authentication token required at server? – guest271314 Mar 13 '17 at 00:35
  • Try https://jsfiddle.net/kaihendry/h0u4vLn3/11/ – hendry Mar 13 '17 at 01:51
  • _"I'm confused how to use the resulting objectURL to show the data:application/pdf;base64 response."_ Note, `URL.createObjectURL()` returns a `Blob URL`, not a `data URI`. – guest271314 Mar 13 '17 at 03:34
  • So how do I make it work? – hendry Mar 13 '17 at 04:11
  • If you are making require with required authentication, you can use approach at [Displaying pdf from arraybuffer](http://stackoverflow.com/questions/42106584/displaying-pdf-from-arraybuffer/). If response is a `data URI`, you can use `.text()` and set text response at `.then()` directly at `iframe` `src` – guest271314 Mar 13 '17 at 23:19
  • Well I still struggle with my own question but you may take a look at below if any of them helps; a [Stackoverflow question](http://stackoverflow.com/questions/12066118/reading-pdf-file-using-javascript) and an [Example](http://hublog.hubmed.org/archives/001948.html) – Erhan Yaşar Mar 15 '17 at 20:08
  • So, `response.blob()` returns a Blob which is UA-local URL. You are trying to build a data URI, for which you need the contents of the response. So with `response.text()` your approach should work, but because of the lack of CORS header, I can’t fix that in the Fiddle. If you want to work with Blob(), your server should return a binary PDF, not the base64 of a PDF. – Surma Apr 18 '17 at 09:25

2 Answers2

0

How do you display a PDF now? It seems you'd need something like https://github.com/mozilla/pdf.js to do this without relying on plugins. If you need a URL, getting a blob URL from a Blob object seems the most straightforward.

Anne
  • 7,070
  • 1
  • 26
  • 27
0

As Surma points out in the comments: "If you want to work with Blob(), your server should return a binary PDF", and the problem with my endpoint was that it was returning a base64 encoded response.

I have since worked out how to make serverless respond in binary and posted the code here: https://github.com/calvintychan/serverless-html-pdf/pull/2

hendry
  • 9,725
  • 18
  • 81
  • 139