Several ways to display PDF preview on the front end

1. js implements pdf preview

1. iframe tag

The HTML inline frame element iframe represents a nested browsing context. It can embed another HTML page into the current page.

<iframe src="./test.pdf" height="900px;" width="800px"></iframe>

2. embed tag

The HTML embed element embeds external content at a specified location in a document. This content is provided by external applications or other sources of interactive content such as browser plug-ins

<embed src="./test.pdf" type="application/pdf" width="100%" height="100%" />

3. object tag

The HTML object element (or HTML embedded object element) represents the introduction of an external resource, which may be an image, an embedded browsing context, or a resource used by a plug-in.

<object
  data="./test.pdf"
  type="application/pdf"
  width="100%"
  height="100%"
></object>

Note: The above three have their own toolbar bar, and each browser is inconsistent, as shown in the figure below:
insert image description here
How to remove it:

<iframe
 src=test.pdf#toolbar=0"  //pdf地址后添加#toolbar=0
 type="application/x-google-chrome-pdf"    
 width="100%"
 height="100%"></iframe>

Download pdf method: (the same domain name is directly downloaded to the local, and the domain name is different, it will be opened in a new page)

download("test.pdf","文件名")

function download (url, name) {
    
    
    const aLink = document.createElement('a')
     aLink.download = name
     aLink.href = url
     aLink.dispatchEvent(new MouseEvent('click', {
    
    }))
 }

4. Use the PDF.js plugin

2. Three display methods of WeChat applet pdf files

1. pdfjs third party

<web-view src="https://byfile.disscode.cn/pdfjs-2.8/web/viewer.html?file={
    
    {url}}"></web-view>

2. markdown third party

<web-view src="https://byfile.disscode.cn/marked/marked.html?file={
    
    {url}}"></web-view>

3. The self-contained method of the WeChat Mini Program

Download the pdf file through wx.downloadFile, and then display it through wx.openDocument.

 wx.downloadFile({
    
    
     url: 你的pdf地址,//可以是后台传过来的路径
     success: function(res) {
    
    
         const filePath = res.tempFilePath
         wx.openDocument({
    
    
             filePath: filePath,
             showMenu: "true",
             fileType: "pdf",
             success: function(res) {
    
    
                 //成功
             }
         })
     }
 })

The emulator will be directly downloaded to the local, and the real machine debugging can realize the preview, and click the upper right corner on the Android to download directly to the local, which can be found in the recent file. Note: There is no direct download in the upper right corner of Apple