PDF Preview

Hi,

I’m having a hard time on what should be the link that i will use in order for me to display the attached pdf file properly.

when i get the record of the attachment and get it’s source it displays this error

is there someone here who knows how can i display the attached pdf on a iFrame? or even other elements, i just need to have a preview of the pdf file.

Requirement:

  1. upload the pdf file on the attachment element

  2. when viewing the record, a preview of the attached pdf should display.

Thank you.

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

I got this working looking at the code in that link, but didn’t need the pdf.js.
I just used jquery for bits of the code.

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
(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’);
    });
  });
})();

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

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

Yay, excellent! :smiley:

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

Hello Nattapon!

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

The problem is only IE11.

 

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