Embed a blob to HTML

Question

I have a pdf blob like below, not complete: result: "data:application/pdf;base64,JVBERi0xLjcKCjQgMCBvYmoKKElkZW50aXR5KQplbmRvYmoKNSAwIG9iagooQWRvYmUpCmVuZG9iago4IDAgb2JqCjw8Ci9GaWx0ZXIgL0ZsYXRlRGVjb2RlCi9MZW5ndGggODg0OTIKL1R5cGUgL1N0cmVhbQo+PgpzdHJlYW0KeJzsfQlgVNXV…".

I need to view this pdf in html . Is there a possibility? Please favour

Possible duplicate of [MIME encoding of a PDF file in an HTML page](https://stackoverflow.com/questions/11551197/mime-encoding-of-a-pdf-file-in-an-html-page) — Mehravish Temkar, Jan 24 '19 at 07:10
@MehravishTemkar it gave me Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss) at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.sanitize (platform-browser.js:1812) — Gayathri, Jan 24 '19 at 07:28

score 0 · Answer 1 · answered Jan 24 '19 at 07:08

0

You may use PDF.js, refer to this example, it's pretty straightforward :)

answered Jan 24 '19 at 07:08

Silvio Biasiol

856
8
14

score 0 · Answer 2 · answered Jan 24 '19 at 08:30

This is solved with embed tag in html, as in "MIME encoding of a PDF file in an HTML page".

This resulted in error

"Error: unsafe value used in a resource URL context (see g.co/ng/security#xss) at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.sanitize (platform-browser.js:1812)"

This was later solved with Unsafe value used in a resource URL context with Angular 2 using DomSanitizer, answered by @helzgate as method 1.

Overall code:

in HTML:

<embed [src]='sanitizer.bypassSecurityTrustResourceUrl(imgURL)' height="200" *ngIf="imgURL">

In typescript,add the following in component:

import { DomSanitizer } from '@angular/platform-browser';

and

  constructor(public sanitizer: DomSanitizer) { }

Embed a blob to HTML

2 Answers2