SharePoint 2019 does not generate PDF thumbnails using jQuery or Javascript code

Tanzim Shaikh 121 Reputation points
2021-08-09T08:14:10.793+00:00

Hello,
I was referring to the article "SharePoint 2013 get thumbnail from PDF" but I couldn't comment on it further hence started a new thread. My environment is SharePoint 2019 on-premises and I am using Scandel's code in github to produce PDF thumbnail.

Problem: It can only generates the PDF thumbnail if I add it manually one by one like this <img data-pdf-thumbnail-file="https://fakesharepoint.com/sites/whatever/DocumentLibrary/samplePDF.pdf" data-pdf-thumbnail-width="100" data-pdf-thumbnail-height="150" />. However I want to get it in to the loop so that I may generate all the PDF thumbnails on the SharePoint page. I am using ASPX page of SharePoint.

Microsoft 365 and Office | SharePoint Server | Development
0 comments No comments
{count} votes

Accepted answer
  1. MichaelHan-MSFT 18,126 Reputation points
    2021-08-10T02:50:40.703+00:00

    Hi @Tanzim Shaikh ,

    You could use sharepoint jsom to get all files, then loop through the files and add the file url to the img element, for example:

    var clientContext = new SP.ClientContext();  
    //get the library  
    var library = clientContext.get_web().getFolderByServerRelativeUrl('/sites/test/DocumentLibrary');  
    //get all files in the library  
    var files = library.get_files();  
    clientContext.load(files);  
    clientContext.executeQueryAsync(onSuccess,onFailed);  
    var images=""  
    function onSuccess(){  
        files.get_data().forEach(file=>{  
            var fileName=file.get_name();  
            //get pdf files only  
            if(/\.pdf$/.test(fileName)){  
            var fileUrl=file.get_serverRelativeUrl();  
            console.log(fileUrl)  
            images+= "<img data-pdf-thumbnail-file='" + fileUrl + "' data-pdf-thumbnail-width='100' data-pdf-thumbnail-height='150' />"  
            }  
        })  
        console.log(images);  
        $('#test').html(images);  
        createPDFThumbnails();  
    }  
      
    function onFailed(sender, args) {  
        console.log('Failed' + args.get_message() + '\n' + args.get_stackTrace());  
    }  
    

    If an Answer is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.
    0 comments No comments

3 additional answers

Sort by: Most helpful
  1. Tanzim Shaikh 121 Reputation points
    2021-08-10T08:35:26.647+00:00

    Hi Michael,
    We are able to display everything in console without any issue but the real problem is to write to the HTML or write in the jQuery for HTML. It does not display in the SharePoint. We tried innerHTML, html(), document.write and all other methods but it does not display the image. However when we write in HTML as mentioned in my question before then the image appears.

    Best regards

    1 person found this answer helpful.

  2. Tanzim Shaikh 121 Reputation points
    2021-08-10T07:49:54.78+00:00

    Thank you Michael, I will try and get back to you on this.

    0 comments No comments

  3. Tanzim Shaikh 121 Reputation points
    2021-08-15T08:03:02.687+00:00

    Hi Michael,
    It worked.

    Thank you so much.

    Best regards

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.