In SharePoint hosted App I need to get a specific PDF document from SharePoint Document Library & display its 1st page to a HTML canvas using JavaScript.

For that, I tried to retrieve the PDF file using RestAPI & then render the 1st page in canvas using pdf.js

The problem is when I trying to Implement this canvas binding with blank page.

Here is the Code:

function execCrossDomainRequest() {
// executor: The RequestExecutor object    
// Initialize the RequestExecutor with the app web URL.    
var executor = new SP.RequestExecutor(appweburl);

      url:appweburl +
        "/_api/SP.AppContextSite(@target)/web/getfilebyserverrelativeurl('/sites/SiteName/LibraryName/sample.pdf')/$value?@target='" +
         hostweburl + "'",
      method: "GET",
      binaryStringResponseBody: true,

      headers: { "Accept": "application/json; odata=verbose" },                   
      success: function (data) {

          var blob = new Blob([data.body], { type: "application/pdf" });
          var fileURL = URL.createObjectURL(blob);


      error: function (err) {    
              alert("error: " + JSON.stringify(err));    


And render function is,

function RenderToCanvas(fileURL){
    PDFJS.getDocument({ url: fileURL }).then(function (pdf_doc) {
      __PDF_DOC = pdf_doc;
      // Show the first page
      var page_no = 1;

 __PDF_DOC.getPage(page_no).then(function (page) {

          __CANVAS = $("#pdf-canvas").get(0);
          __CANVAS_CTX = __CANVAS.getContext('2d');
          // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
          var scale_required = __CANVAS.width / page.getViewport(1).width;
          // Get viewport of the page at required scale
          var viewport = page.getViewport(scale_required);

          // Set canvas height
          __CANVAS.height = viewport.height;

          var renderContext = {
              canvasContext: __CANVAS_CTX,
              viewport: viewport

          // Render the page contents in the canvas
          page.render(renderContext).then(function () {
            //code after rendering

  }).catch(function (error) {
      // If error



please help...

  • what is the error you are getting? Or the Page is not getting displayed? it will be great if you can provide Error details/Screen shot
    – DvG
    Commented Jun 16, 2017 at 11:47
  • there is no error getting in the console. It's just displaying 1st page as blank.
    – Vishnu S
    Commented Jun 19, 2017 at 5:05

1 Answer 1


Instead of downloading the file why not just embed the pdf in the page using an html tag:

<embed src="<PATH TO SP DO LIBRARY FOLDER>/file_name.pdf" width="800px" height="2100px" />

Then, use again javascript to unable page rotation.

Or you could use an iframe as well:

<iframe src="<PATH TO SP DO LIBRARY FOLDER>/file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.