Displaying a PDF

[ADT]

We have a weekly bulletin that we access via Frog!!  This is a PDF file uploaded to a shared folder in school documents the file name includes the current week date!!!  I want to know how I could display this on a page rather than staff having to download it!!!

And before anyone asks yes this was probably answered on the old Forum but as that is dying.............

[Corinne]

This doesn't use the shared folder but you can use a link to file and html widget to display a pdf. Add pdf to widget, uncheck force download - this will then open the file in a browser tab. Copy the address and put this into the following code, in a HTML widget: 

<embed src="https://....WebAddressHere...." width="580" height="530" type='application/pdf'>

You can then hide the link to file widget so the user only sees the file embedded. 

[mmclaughlin]

A good work around is also to use a link to file widget and set it for not forcing download.  This will send you to a web addressed version of it.  You then can embed the website in your page creating a viewable .pdf

[Graham Quince]

Hi @ADT,

There's a bunch of different ways you can do this:

Using this HTML code as a starting point:

<embed src="copied_link" width="500" height="375" type='application/pdf'>

You can display a PDF in a site.

1) We could use the File Drop widget tutorial: https://www.frogcommunity.com/filedrop to read all files in a File Drop and display them using the above

2) We could use the code in Understanding APIs tutorial https://www.frogcommunity.com/understanding-api to read the contents of a folder and display using the above

3) @John Elliott posted this option on the old forum:

Quote

My example below attempts to make an A4 sized PDF fit fully on the screen, regardless of how wide the column you put it in. You don't need pixel widths because its the same width as the column on Frog that you put the 'link to file' widget in. Another bonus about this script is that you don't need to find the file's UUID, all you need to do is put a Link to File widget on a page as well as a very short HTML Widget to initiate the larger script (placed likely on a shared dashboard, can be on multiple dashboards if not all users share one).

Larger Script to place on a shared dashboard(or multiple: students, staff, etc if not shared):
I'd just put this at the very bottom of the page somewhere so the margins associated with the HTML widget don't interfere with the look of your dashboard.

If you don't want A4 height on the resulting iFrame, but would prefer the pdf to fit more 16/9 ratio, just reduce the padding-bottom % in line 2 of the HTML below. 56% should give you roughly 16/9 ratio, but you can change it how you want. For the purposes of this demo though, you can't really have different heights on different pages. It's fairly possible though.

<style>
div.pdf_viewer { position: relative; padding-bottom: 130%; height: 0; overflow: hidden; }
div.pdf_viewer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<script>
if (typeof PDF_To_Viewer !== 'object') { //just in case this is on multiple dashboards, only really want to instantiate it once.
    PDF_To_Viewer = {
        base_url: Frog.Utilities.getBaseUrl() + '/app/',
        init: function(anchor) {
            this.anchor = 'view_anchor_'+ Math.floor((Math.random() *10000) + 1);
            $('#'+ anchor).attr('id', this.anchor); //allow this element ID to be re-used on other pages.
            
            this.buckets = $('#'+ this.anchor).parents('div.sites_page').data('controllers').sites_page.page_pre_save_state.buckets;
            this.find_link_to_file();
        },
        find_link_to_file: function() {
            for (i=0; i<this.buckets.length; i++) {
                for (uuid in this.buckets[i]) {
                    if (typeof this.buckets[i][uuid].widget.namespace == "widget.filelink") {//is this a link to file
                        this.is_a_pdf(i, uuid);
                    }
                }
            }
        },
        is_a_pdf: function(i, uuid) {
            var context = {bucket: this.buckets[i][uuid], anchor: this.anchor};
            $.ajax(this.buckets[i][uuid].prefs.resource_url, {type: "HEAD", context: context}).complete(function(xhr) {
                if (xhr.getResponseHeader('Content-Type') == 'application/pdf')
                    PDF_To_Viewer.replace_with_viewer(this);
            });
        },
        replace_with_viewer: function(data) {
            var html = "<iframe src="https://docs.google.com/gview?url="+ encodeURIComponent(this.base_url + data.bucket.prefs.resource_url) +"&embedded=true" frameborder='0'></iframe>";
            $('#'+ data.anchor).parents('.sites_page').find('div[data-content-uuid="'+ data.bucket.uuid +'"] div.widget_filelink').addClass('pdf_viewer').html(html);
        }
    };
}
</script>

Quote

Now, on the page that you have a 'Link to File' widget that points to a PDF, put this inside an HTML widget(again, likely best to just put it at the bottom of the page):

<div id='something_somewhat_unique'></div>
<script>
PDF_To_Viewer.init('something_somewhat_unique');
</script>

Quote

From the above script, you can see that I used the same text in the id of the div as I did in the init function.

You'll probably also realise that this doesn't use any APIs but rather depends on the DOM. Frog don't support use of the DOM, but I couldn't find any reliable APIs to use to get the visible PDFs on a specific page. If there is a viable api that I skipped over, i'd be willing to alter this so that it worked with that instead. If not, the only problem with this code would be if Frog changed some major core parts of their code and even then, all that would happen would be that the 'link to file' widgets would just stay normal, they wouldn't change to iFrames.

4) @emoseley posted this idea:

Quote

Most PDF's I use are about 4 or less pages. I open them in Acrobat and save the file as a .png. Acrobat renders each page as an image. I use a table in the text widget to easily make the size uniform and upload one image per cell.

5) And this one:

Quote

1 - On your site, drag in a the Link to file widget
2 - upload your PDF and uncheck the Force download option
3 - Save and close the editor
4 - Click on the link, the PDF should now open in a browser tab
5 - Copy the address

Paste this address into the "Embed Website" Widget

 

Thanks for posting this.  I was wondering how best to share these.  If you need me to elaborate on any of these (especially the top two), just let me know.  From your original description, 2) seems the closest match, but... if youy check to Ideas Portal, Embed Doc Widget - Ability to embed a PDF Document within a site -  http://ideas.frogcommunity.com/ideas/FRG-I-725 is actually marked as In Development

Hope something here helps

Graham

[ADT]

Not that im saying you lost me.....  but I had a look..... and then gave up!!!!

If it wasn't for blinking school kids getting in the way this teaching/VLE Coordinator job would be so much easier!!

[Graham Quince]

Hi @ADT

I've created a site on your FrogLearn (and shared it with you).  It contains the following code which is set to your Staff Bulletin folder.

<script>
// Create a div, and give it is unqiue ID
$PDFshower = $("<div>", {
        id: Frog.Utilities.generateSimpleId()
    }
);
Frog.Model
    .api('resources.getOfType', {
        sources: ["native","site"],
        type: 'staff',
        author: 'true',
        root_folder: 'EDAAA0E92002F81B92C2DFCD917CAC05E532634CEE5FEBD9',
        folder: 'B68B6DC42002FFB76B9C0F476C8F3400E8D1320C3617F221',
        filter: null,
        exclude_templates: 'true'
    }).done(function(listResponse) {
        var files = listResponse.data.resources;
        $.each(files, function(index,file) {
           $PDFshower.append(
                '<embed src="'+file.external_url+'" width="580" height="700" type="application/pdf">'
            );
        }
    );
});
//arguments[0] is the HTML widget
arguments[0].append($PDFshower);
</script>

 

[ADT]

1 minute ago, Graham Quince said:

Hi @ADT

I've created a site on your FrogLearn (and shared it with you).  It contains the following code which is set to your Staff Bulletin folder.

<script>
// Create a div, and give it is unqiue ID
$PDFshower = $("<div>", {
        id: Frog.Utilities.generateSimpleId()
    }
);
Frog.Model
    .api('resources.getOfType', {
        sources: ["native","site"],
        type: 'staff',
        author: 'true',
        root_folder: 'EDAAA0E92002F81B92C2DFCD917CAC05E532634CEE5FEBD9',
        folder: 'B68B6DC42002FFB76B9C0F476C8F3400E8D1320C3617F221',
        filter: null,
        exclude_templates: 'true'
    }).done(function(listResponse) {
        var files = listResponse.data.resources;
        $.each(files, function(index,file) {
           $PDFshower.append(
                '<embed src="'+file.external_url+'" width="580" height="700" type="application/pdf">'
            );
        }
    );
});
//arguments[0] is the HTML widget
arguments[0].append($PDFshower);
</script>

 

I just noticed!!!

Does that mean it will automatically display the PDF in that folder????

[ADT]

Doesn't mater I answered my own question!!!

Thanks Lefty!!!!!!  Or is it your right arm???

[adamw]

On 9/28/2016 at 11:59, ADT said:

We have a weekly bulletin that we access via Frog!!  This is a PDF file uploaded to a shared folder in school documents the file name includes the current week date!!!  I want to know how I could display this on a page rather than staff having to download it!!!

And before anyone asks yes this was probably answered on the old Forum but as that is dying.............

 

Just to let you know, one of our developers has been working on a embed PDF widget, which should make doing this a whole lot easier for you guys! Keep an eye out for this appearing soon 

[ADT]

3 minutes ago, adamw said:

 

Just to let you know, one of our developers has been working on a embed PDF widget, which should make doing this a whole lot easier for you guys! Keep an eye out for this appearing soon 

Never mind teasing us...  get it made!!!

[Graham Quince]

18 hours ago, ADT said:

Doesn't mater I answered my own question!!!

Thanks Lefty!!!!!!  Or is it your right arm???

It's my left arm that was broken and i am left-handed, but the surgery went well and this is my last week with a sling.   i managed to use both hands to type this post.

[ADT]

6 minutes ago, Graham Quince said:

It's my left arm that was broken and i am left-handed, but the surgery went well and this is my last week with a sling.   i managed to use both hands to type this post.

I had heard it was your dominant arm... o well hopefully you'll be back up to full speed soon enough....   

[ADT]

 

On 04/10/2016 at 14:51, Graham Quince said:

Hi @ADT

I've created a site on your FrogLearn (and shared it with you).  It contains the following code which is set to your Staff Bulletin folder.

<script>
// Create a div, and give it is unqiue ID
$PDFshower = $("<div>", {
        id: Frog.Utilities.generateSimpleId()
    }
);
Frog.Model
    .api('resources.getOfType', {
        sources: ["native","site"],
        type: 'staff',
        author: 'true',
        root_folder: 'EDAAA0E92002F81B92C2DFCD917CAC05E532634CEE5FEBD9',
        folder: 'B68B6DC42002FFB76B9C0F476C8F3400E8D1320C3617F221',
        filter: null,
        exclude_templates: 'true'
    }).done(function(listResponse) {
        var files = listResponse.data.resources;
        $.each(files, function(index,file) {
           $PDFshower.append(
                '<embed src="'+file.external_url+'" width="580" height="700" type="application/pdf">'
            );
        }
    );
});
//arguments[0] is the HTML widget
arguments[0].append($PDFshower);
</script>

 

So could you get this to display a excel spreadsheet like your bug list???

[Graham Quince]

Unfortunately, you can't display a spreadsheet or document in the same way.  For the Bugs list, I used an Office365 account and Share the document live to anyone with the link.  At that point, I was then able to embed it like a regular web page.

 

 

[ADT]

27 minutes ago, Graham Quince said:

Unfortunately, you can't display a spreadsheet or document in the same way.  For the Bugs list, I used an Office365 account and Share the document live to anyone with the link.  At that point, I was then able to embed it like a regular web page.

 

 

That sounds like to much like hard work to me!!!!!!!!!! PDFed it is!!!

[ADT]

@Graham Quince here's one for you.....  So we have our weekly bulletin displayed using this code....  works no problems in chrome...  but not in internet explorer seams to try and download then gives up!!  Our phone list is also on using the same code...  works fine in both!!  The only thing I can see is a difference in file size!!!  Phone list less than a MB...  Bulletin almost 3mb!!

[ADT]

@Graham Quince never mind liking...  get your code fixed!!!  Or that actual PDF widget made!!

Edited November 4, 2016 by ADT

[Graham Quince]

Just to make things really annoying for you, i've dialled into Gosforth's platform looked at the staff bulletin on both Chrome and IE and the PDF loaded into both browsers (eventually).  I have a vague memory of learning that IE did have a file size limit whih might be what you're hitting.

[ADT]

1 hour ago, Graham Quince said:

Just to make things really annoying for you, i've dialled into Gosforth's platform looked at the staff bulletin on both Chrome and IE and the PDF loaded into both browsers (eventually).  I have a vague memory of learning that IE did have a file size limit whih might be what you're hitting.

Well that's no help....

[ADT]

Although strangly this weeks seams to have loaded straight away...  and its 3mb+???

[ADT]

On ‎04‎/‎11‎/‎2016 at 12:11, Graham Quince said:

Just to make things really annoying for you, i've dialled into Gosforth's platform looked at the staff bulletin on both Chrome and IE and the PDF loaded into both browsers (eventually).  I have a vague memory of learning that IE did have a file size limit whih might be what you're hitting.

Well this is raising its head again...  Not sure if its a IE11 issue...  the PDF plugin...  or your dodgy code???

Whens the PDF ready widget coming out??

[Graham Quince]

PDF widget is coming out as part of Dickens - which is looking like end of Jan/start of Feb.

I'll dial in and see if i can spot anything

[Graham Quince]

Sorry @ADT, it's loading for me.

[ADT]

Which leaves me with IE11 settings...  PDF reader version... 

[Graham Quince]

It's strange.  i've looked at it in IE and it's be fine, and the above code is using the browser's PDF reader, as far as I know.