Microsoft 365 Community Community Demos, 3 Jan 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - Save and export files as PDF using SharePoint Framework Extension

Description

Save and export files as PDF using SharePoint Framework Extension demo taken from the SharePoint dev Special Interest Group recording at 3rd of January 2019.

Presenter - Kyle Schaeffer (Spiritous) - @kyleschaeffer

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

So what I'm going to show? You is basically a PDF conversion. Extension I built using sharper framework list extensions so who doesn't love PDFs before we start? So this is the repo for puzzle, part where I work, I'm the CTO puzzle. Part also part is a consultant company working with office, 365 and SharePoint. Now we do a lot of shopping framework stuff and right now we have a bunch of solutions which are shared for free here.

A

Our puzzle, part github, but we're in the process of actually moving this over to the PMPA repository when I have the time, so the one exception I'm going into this time, is the PDF export, so here's the readme file, how to install it, etc. So it's a global extension, so this actually started out as a hackathon project is pacy nope last year, but the area for then I ended up, creating a solution which used flow master functions because a PS weren't there, but now the API is: are there so I understand?

A

There was a demo with PDF conversion a couple weeks ago as well. This Cole is that true, which I think use for functions.

A

Yeah, so, let's first so if I click my document, docx file here, you see I get an exceptional pair, the download as PDF or save as PDF. If I click two files, then is it fine? So basically two options either save as PDF, which will convert each document to PDF in the same library or download as PDF, which will download as a zip file use accept as if there is multiple files or just one file, if or as PDF file.

A

If you just pick one so if I click, these two files do save as PDF processing file number one file number two, and if we go back to the library, we now have a couple of PDFs here as well.

A

So so fairly easy. He says after what's happening behind the scenes is actually I'm using a function called render list as data stream, which is somewhat documented and somewhat not no email has a post on it. There's some other posts as well. So basically, if you pass in this option here render listed of enable media, ta, URLs I, don't know what ta stands for, maybe something smart. You actually get back a payload for for the item with looking like this right.

A

So so this is so there's a URL with these placeholders in it, and then you also get the actual value you need to replace which I do down here. So basically you get a URL. You can then call and then get the PDF for that file, which is converted Guernsey's.

A

So when I click each of the documents over here, I pass in the ID and then I, then I use camel query to generate this payload for each first. If we scroll up, let's see if we can find the right call.

A

There's so many calls this one look at the response.

A

A

It's nice too, so here's me the service data, the URL. Basically, you just look look at this nice JSON file and you have figure out what actually, but it's everything's in this big payload. That's yep seriously the actual this the different placeholders here right and then for the so that means for each item. I get the PDF URL and in order to create the the PDF items. So what I do since I want to keep the metadata you see is I also keep keep all the metadata here.

A

So I figured the easiest approach to do this. It's basically you so take the original URL rename the extension dot, PDF and then I first copy the file this is I.

A

Take, for example, the docx file is copied and let's call it PDF, because using the copy, 2 method will keep all the metadata in whatever columns you have and then I, then I load the blob data for the PDF and then I just set the PDF data into the file afterwards less sort of a hackish way of instead of creating a new file and copy every column and by caring about how many columns you have so, then you just just get the data sort of a nice way of doing that.

A

So that's a smart and smart trick. I figured I'd show some other stuff as well. So you see I have these nice icons up here and these are actually SVG icons. So if, if you look at my my manifest so this points to this route export those SVG and every save as s-video, so those are our icons. So so, let's, let's see if we do inspect- and you see this actually now points to the public CDN wherever this web part is being served from.

A

But you have no idea what the URL is and if you haven't enabled CDN, then then the path would be different. So the thing is, if you just point to route here, and if you modify your gulp file a little bit suppose I have a small task here, called copy icons, it's basically a copy task which takes all the SVG files and copy them to the temp deploy folder. Because when you build yourself a framework report, what happens is all the files in temp deploys?

A

Actually the files being added into the package which is being built? So why I think it asked like this just copy the files you need? You can actually reference files from the root of your Oh wherever the web part is being served from if it's a global, I, app catalog, a local, app catalog or through the CDM, and then the path will actually be and be correct as a also small tricky to get your I can sign it. It doesn't have to be a 3d files could be a PNG.

A

The so the other option would be if you could do like a data URL here, but that's not support the first VGC yet so that's this sort of my workaround for doing that and then I think I have yeah. I have the puzzle part logo in there, which is also lower hair and then that's fairly easy to get in. If you just do just to require and I will be bundled correctly, I think I require here and that make sure so this file is actually being bundled the same thing.

A

So, instead of doing the gulp task, I could actually, if I, just added status like this plus, let I can one and then just use requires I will also move the file into the temp, deploy folder I!

A

Guess that's what I want to show and I'll paste the URL to the repo someone over the pace of the repo mice.