Several solutions for online preview PDF

Because the customer needs to achieve the preview of the PDF processing, online to find some PDF online preview solution, some with Pdfjs online preview, some use pdfobject embedded display, and some through the conversion jpg/png way to realize the indirect display way, began to want through the simple way, can use JS plug-in to achieve the best preview, but online preview always have some shortcomings, such as the compatibility of different browsers, and even different mobile platforms show the effect is not the same, but it is best to use the indirect way, the PDF into the image display effect, to meet customer requirements.

1, online implementation of the way the preview

At first I was inclined to use this approach, hoping to adopt a better JS plug-in way to achieve online preview of the PDF (via Web preview), so on GitHub to find a higher ranked PDF plugin

A look at the ranking is still very high, then it should be good to see the PDF file, the effect is still the leverage.

However, the customer's request is to display the normal invoice PDF file, change the file address, there is some information can not display, looked for a bit did not see the solution, so the effect is not standard.

Even the basic invoice can not be displayed, then I can not use it to display the invoice PDF file.

Finally, the method of using Pdfobject (pdfobject.com/) to embed PDF display online is tested, and this JS plugin is also good, and can be found on GitHub as well.

It is also very simple to use, as shown in the following code.

<Scriptsrc= "/js/pdfobject.js"></Script><Script>pdfobject.embed ("/pdf/sample-3pp.pdf", "#example1");</Script>

If you need to set the size of the preview window, you can set the style.

<style>. Pdfobject-container{Height:500px;}. Pdfobject{Border:1px solid #666; }</style>

The effect is normal, but I opened the Safari browser on the Apple phone and found that it was not displayed properly.

Therefore, it is not possible to use the preview display.

In the actual test, it is found that the browser of the Android phone is not supported for previewing PDFs, some directly download PDFs and do not support preview display.

In order to avoid these problems, it is best to find a compromise solution, to convert the PDF to a picture to display, the picture is displayed in different browsers but there is no problem.

2, PDF conversion image to display

Converting a Pdf to a picture also has many control handles, such as Aspose.pdf, Spire.pdf, Pdfiumviewer, and so on, and the different methods used by the third-party libraries vary, but the ideas are very similar.

Would have preferred to use aspose.pdf, but found that the converted invoice information is missing some Chinese characters or garbled characters, resulting in a normal display.

Later looking for the spire.pdf version and the corresponding green version, finally can be converted to the correct format, so it is used to convert the image using this third-party control.

As for the online preview, we create the corresponding image file when we first request the PDF preview file, and then return to the path directly.

The implementation of the preview effect is as follows.

Since we are displaying on ASP. NET MVC project, we need to modify the controller's processing logic, and make a judgment of the image generation.

The implementation code for the controller background is shown below.

                //determine if a pdf-generated picture file exists,//The generated JPG file is named Attachment ID                stringPdfjpgpath =string. Format ("/generatefiles/pdf/{0}.jpg", info.id); stringPdfjpg =Server.MapPath (Pdfjpgpath); //PDF file path, relative to the directory                stringPdfpath =@"/content/template/fapiao.pdf"; stringPdfrealpath =Server.MapPath (Pdfpath); //generated if not present, otherwise the generated file is returned                if(!Fileutil.isexistfile (pdfjpg)) {                                        //crackedmodifyinmemory_spire.activatememorypatching (); Pdfdocument Doc=Newpdfdocument (Pdfrealpath); varImage = Doc. Saveasimage (0, Spire.Pdf.Graphics.PdfImageType.Bitmap, -, -);                Fileutil.bytestofile (imagehelper.imagetobytes (image), pdfjpg); }                //Store a pathInfo. Savepath = Pdfjpgpath;//The modification uses this property to return the use

Finally, the corresponding JSON information can be returned

                // Serial Number returns object Information                string result = Jsonconvert.serializeobject (info, formatting.indented);                 return Content (result);

In the page view, we can realize the dynamic display of the image through Ajax request processing.

        //Refresh List    varID = ' '; functionRefresh () {varFileName = $ ("#WHC_FileName"). Val (); //Gets or generates the corresponding PDF file, displayed according to the path$.getjson ("/pdfview/findbyfilename?r=" + math.random () + "&name=" + filename,function(info) {if(Info! = ") {                //get picture path, set display$ ("#imgfapiao"). attr ("src"), Info.            Savepath);    }        }); }

Finally, we realized the preview of the picture.

Above is one of my solutions, if you have a better way to solve the problem of PDF online Preview, welcome to communicate with each other.