How to Display PDF Preview within a Record?

, , ,
1

Hi,

Does someone know how I can display the attached pdf on an iFrame?

I just want a PDF file preview displayed within a Kintone record.

Requirement:

  1. Upload the PDF file on the Attachment field

  2. When viewing the record, a preview of the attached PDF should display

Thank you in advance.

2

Hello German!

This javascript is something that you are looking for. It’s a javascript to render PDF on browser or such.
 https://mozilla.github.io/pdf.js/

In kintone, you just need to implement it in the space element.

For your reference, the following page shows the sample code of doing so. Though it is in Japanese,
you would probably figure it out by looking at those sample codes.
 http://qiita.com/YoshihikoTakeuchi/items/fe721a4a6b9654e8d2f3

3

I got this working by referencing the Preview Data URI format PDF Qiita tutorial’s code, but I didn’t need the pdf.js.
I just used jQuery for bits of the code.

At first, I couldn’t get the width to adjust.
But I later realized the width was set as the same as the Blank Space element’s width (in the App’s settings).

Here’s the code I used, pretty much copied from the link xD

:zap: Make sure to include jQuery https://js.kintone.com/jquery/2.2.4/jquery.min.js

(function () {
  'use strict';
  var SPACEFIELD_ID = "preview"; //Element ID of the Space field  
  var ATTACHMENT_FIELD_FIELDCODE = "pdffile"; //Field code of the attachment field  

  function getFile(url) {
    var df = new $.Deferred();
    var xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.responseType = 'blob';

    xhr.onload = function (e) {
      if (this.status === 200) {
        df.resolve(this.response);
      }
    };

    xhr.send();
    return df.promise();
  }

  kintone.events.on('app.record.detail.show', function (event) {
    var record = event.record;

    var space = kintone.app.record.getSpaceElement(SPACEFIELD_ID);
    var fileKey = record[ATTACHMENT_FIELD_FIELDCODE].value[0].fileKey;
    var fileUrl = '/k/v1/file.json?fileKey=' + fileKey;

    var promise = getFile(fileUrl);
    promise.done(function (pdfData) {
      var url = window.URL || window.webkitURL;
      var imageUrl = url.createObjectURL(pdfData);
      var preview = '\<object data="' + imageUrl + '" type="application/pdf" width="100%" height="100%"\>';
      preview += '\</object\>';
      $(space).append(preview).css('height', '1200');
    });
  });
})();
4

Thanks guys for the answer I have made the requirement because of your help :slight_smile:

5

Hope you guys are still there for our company’s future projects with kintone

6

Yay, excellent! :smiley:

7

 have a problem running this script with IE11, I found an error this picture

8

Hello Nattapon!

Just to make sure, did you try it out with other browsers and it’s only happening in IE11?

9

The problem is only IE11.

 

10

Hello Nattapon,

Thanks for your reply and screenshots.

Since you said it’s working on other browsers,
the problem could be the IE settings, so can you check whether these apply to you?

Kintone Help - When Internet Explorer Cannot Display a kintone.com Page Correctly
https://get.kintone.help/en/settings/browser/webbrowser/windows/winie11.html

1 Like