Regarding assisting front-end mm to preview PDF online

In the hydrology article, the bold red letters are the key points, and others can be ignored. The article comes from life, but has also been adapted.

1. A chance encounter

It was around 9 o'clock on a winter Saturday night. I had worked overtime all day, and I was going to go to bed early to rest. Suddenly, in a wx technical group I joined, a mm asked a technical question - "How to do an online preview of PDF". This is abnormal, because usually people drive in technical groups and discuss technology in driving groups . I chatted with mm for a few words, and the general situation is that she put pdfjs in the local project, and then she could not preview the online pdf . Seeing that no one was talking in the group, I said I could chat privately (✪ω✪)

After further private chat, I guess it may be a cross-domain or pdfjs project version issue . I said it was almost 10 o'clock, why don't we talk tomorrow, but mm said no, I was very anxious. As soon as I was erect, I crawled out of the slightly warm bed o(╥﹏╥)o

2. Night talk by candlelight

After 2 hours of in-depth communication and remote communication. I figured out mm's needs: her front-end project is under domain name A; the network address of the network pdf is returned by the interface and is under domain name B.

I sincerely lament how important it is to describe a problem clearly and accurately

In this case, cross-domain problems will exist no matter how long you use domain name A.
Insert image description here
mm said that if she doesn’t listen, she won’t listen, so she has to solve this problem on the front end. She doesn’t want to communicate with the backend that provides this interface (not the backend of their company)

I said from the beginning that it was a bit nonsense to solve cross-domain issues unilaterally from the front end, but out of courtesy of a gentleman in winter trousers, I didn’t say it clearly and said I could try it. Later, I checked the information and found that most of them solve cross-domain issues from the front end in many aspects, which is not very easy.
Insert image description here
Insert image description here
Then, I gave mm2 some suggestions:
① Let the background developer who gives the pdfjs address put the pdfjs project on the same server as the pdf file network domain name. For example, if the url address of the pdf file is under the B domain name, then the pdfjs project will also be placed under the B domain name . In this way, we can solve the cross-domain problem by deleting it from the root. And sent mm a piece of nginx configuration

  # pdf预览查看
  location /pdfjs {
    
    
    default_type text/html;
    root  路径;
    index  index.html;
    try_files $uri $uri/ /pdfjs/index.html;
  }

② If the backend does not cooperate, you can find our company's backend on our company's server and configure proxy_pass proxy forwarding in nginx

In general it looks like this:

2.1 For example, pdf access address:
https://examjk.qq.com/pdf-online-viewer/web/viewer.html?file=https://examjk.qq.com/monitor-link-view/file/Operation Guide .pdf

The nginx configuration is:

    # pdfjs预览查看
    location /pdf-online-viewer {
    
    
        default_type text/html;
        root  /data/app/fronted/newexamrelated;
        index  index.html;
        try_files $uri $uri/ /pdf-online-viewer/index.html;
    }

    # pdf文件下面存储
    location /monitor-link-view {
    
    
       add_header Cache-Control no-store;
       default_type text/html;
       root  /data/app/fronted/newexamrelated;
       index  index.html index.htm;
       try_files $uri $uri/ /monitor-link-view/index.html;
    }

Then ① pdfjs project deployment address:
/data/app/fronted/xx/pdf-online-viewer/

② PDF file storage directory:
/data/app/fronted/xx/monitor-link-view/file

3. Pursue victory

The time came on Monday morning. Before I could ask mm about the progress, mm directly sent me screenshots of her discussions with the backend. I look at the meaning of the background in the screenshot, and it seems that it is unwilling to configure pdfjs. What are the server dynamic projects and static projects? Later I talked about something else. Finally, before lunch, I finally helped my sister figure it out.

There is also a small episode, after the pdfjs project is completed. I see that although the address is http, it will automatically jump to https . But in the interface, the ur address of the pdf file is http . So there will still be cross-domain issues. I told mm that this problem is very simple. Either you change it, or you can change it behind the scenes. If not, you can use replace to replace the https in the url in the interface with http. They talked about this issue for another hour.

Gradually, I found that if I discussed something other than work with mm, mm’s replies would always be um, oh, so nice.

4. Excessive demands

Later, mm proposed that their company would do an Android preview of ppt. I said that we could use Microsoft’s office file preview link :

https://view.officeapps.live.com/op/view.aspx?src=文件路径地址

mm said that the link she used before was connected to Google's preview, but the product manager was not satisfied. He said that he wanted to remove the ppt logo during the preview, said that there was no full-screen function, and there were other more customized needs. I said you need to communicate with the product, step by step . mm No reply. I said you can try the paid products, and mm said the company would not pay.

mm asked me if I had any ready-made solutions that were suitable for their company's product managers. I said that I had only done a simple preview of word files and used this link from Microsoft. mm no reply

5. We are strangers

From my point of view, the first requirement of users is to be able to preview ppt normally. If you want to do this kind of customization, it will take time to find some solutions. However, I did not get a positive reply from mm (   ). In addition, our company has a lot of work at the end of the year, and the return home policy is changing during the wait-and-see period at the end of the year. Gradually there was no communication.

Guess you like

Origin blog.csdn.net/weixin_44050791/article/details/122655007