pdf not displayed: no src in source visible

Bug Report or Feature Request (mark with an x)
- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

I’m trying to display a pdf from an arraybuffer, working myself through issue 88, and there are no errors concerning this.
But I have no content displayed. It’s odd that I have barely any info within the <pdf-viewer>:

screen shot 2018-01-09 at 17 03 54

Although it’s called correctly: <pdf-viewer [src]="pdf" [render-text]="true" style="display: block;"></pdf-viewer>

I had trouble during installation with dependencies, so I downgraded webpack from 3.1.0 to 2.7.0 according to the unmet dependency warning I received when installing ng2-pdf-viewer. Could that cause problems?

Here are my versions:

$ ng --version

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.1
Node: 6.9.2
OS: darwin x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.1
@angular/cli: 1.6.1
@angular/material: 5.0.1
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 2.7.0

You’re help is much appreciated!

1 possible answer(s) on “pdf not displayed: no src in source visible

  1. This is how I display my PDF. I have the PDF as a base64 string read from a file as my starting point. I convert the base64 string to an ArrayBuffer to use as the source for the pdf-viewer.

        pdf: ArrayBuffer;
    
        // PDF is received as a NavParam from the calling page.
        constructor(public navParams: NavParams) {
            this.pdfParam= navParams.get('pdf');
            // Convert the base64 PDF to an ArrayBuffer
            this.pdf = this.base64ToArrayBuffer(this.pdfParam.base64);
        }
        
        base64ToArrayBuffer(base64) {
            let binary_string =  window.atob(base64);
            let len = binary_string.length;
            let bytes = new Uint8Array(len);
            for (let i = 0; i < len; i++)        {
                bytes[i] = binary_string.charCodeAt(i);
            }
            return bytes.buffer;
        }
    

    HTML

    <pdf-viewer [src]="pdf" [original-size]="false" style="display: block;"></pdf-viewer>
    

    I hope this helps.