PDF. Js is an HTMl-based tool class, familiar with PDF. Js friends are very clear, PDF. Financial websites in particular generate a lot of reports. Online preview is required. Pdf.js is definitely our first choice

Local preview

We can preview it directly in the demo downloaded from the pdF.js website. The case for the official website is listed in view.html under the Web folder. Here I have compiled a simplified version of PDF.js.

These two demos load local files. Nothing to say here. The effect of Demo2 is as follows.

PDFJS does other things for us. With PDFJS, we just need to pass the local file as a parameter to viewer.html.

Remote loading (across domains)

  • It’s easy to implement PDF previews in real projects. But there is a problem with such previews. Often in our distributed projects, resource services and business services are not on the same server. At this point we are working across domains while previewing the file. When I encountered this problem, I took it for granted that THE above a. df was replaced by our remote PDF address.

  • First let’s see if our remote files are ok

  • Then we’ll see if our code changes work

  • With everything in place, I was happy to refresh the Demo2 page and get started. But it was disappointing. An error in the

  • An error roughly means the file was not found. The reason we didn’t find it is because our files are remote. Pdf.js is cross-domain. I found a lot of answers on the Internet. Some say that the web. XML configuration places cross-domain operations. The test is invalid. The request header is changed to cross domain, but it is not clear. Not implemented. The reason I ended up getting the file parameters in Viewer.html was because I needed to get the file stream from that file to get the data to render viewer.html. So I changed my mind.

  • Why not just pass the file stream in the first place? Based on this idea. I started implementing a file stream to get remote addresses. I found a way. We first get the remote file stream via the HttpClient crawler.

public InputStream getYCFile(String urlPath) { InputStream inputStream = null; try { try { String strUrl = urlPath.trim(); URL url=new URL(strUrl); URLConnection connection = url.openConnection(); HttpURLConnection httpURLConnection=(HttpURLConnection) connection; httpURLConnection.setRequestProperty("User-Agent"."Mozilla / 4.0 (compatible; MSIE 5.0; Windows NT; DigExt)"); / / get the input stream, and use the Reader reads the inputStream = httpURLConnection. GetInputStream ();return inputStream;  
            } catch (IOException e) {  
                System.out.println(e.getMessage());
                inputStream = null;  
            }  
        } catch (Exception e) {  
            System.out.println(e.getMessage());
            inputStream = null;  
        }  
        return inputStream;  
    }
Copy the code

  • That way I can return the stream of the remote file to you as long as the address is correct.

  • Based on this method we just need to call this method in SpringMVC when the foreground request goes to the background to get the file stream. The file stream is returned to the foreground via response.

  • Front desk:

<iframe src=".. /test/js/pdfjs/web/viewer.html? The file = < % = basePath % > source/http://192.168.1.184:8080/manage/spirng.pdf"
        width="100%" height="750"></iframe>
Copy the code
  • Finally, let’s look at remote. Isn’t it possible for us to preview the remote one now? The benefit is definitely to reduce server stress.

Download the source code