一、js實現(xiàn)pdf預覽
1. iframe 標簽
HTML 內聯(lián)框架元素 iframe 表示嵌套的 browsing context。它能夠將另一個 HTML 頁面嵌入到當前頁面中。
<iframe src="./test.pdf" height="900px;" width="800px"></iframe>
2. embed 標簽
HTML embed 元素將外部內容嵌入文檔中的指定位置。此內容由外部應用程序或其他交互式內容源（如瀏覽器插件）提供
<embed src="./test.pdf" type="application/pdf" width="100%" height="100%" />
3. object 標簽
HTML object 元素（或者稱作 HTML 嵌入對象元素）表示引入一個外部資源，這個資源可能是一張圖片，一個嵌入的瀏覽上下文，亦或是一個插件所使用的資源。
<object
data="./test.pdf"
type="application/pdf"
width="100%"
height="100%"
></object>
注意：以上三種自帶toolbar欄，并且每個瀏覽器不一致，如下圖：
去掉方法：
<iframe
src=test.pdf#toolbar=0" //pdf地址后添加#toolbar=0
type="application/x-google-chrome-pdf"
width="100%"
height="100%"></iframe>
下載pdf方法：（相同域名直接下載到本地，域名不同會在新頁面打開）
download("test.pdf","文件名")
function download (url, name) {
const aLink = document.createElement('a')
aLink.download = name
aLink.href = url
aLink.dispatchEvent(new MouseEvent('click', {}))
}
4. 使用 PDF.js 插件
二、微信小程序pdf文件的三種展示方式
1. pdfjs第三方
<web-view src="https://byfile.disscode.cn/pdfjs-2.8/web/viewer.html?file={{url}}"></web-view>
2. markdown第三方
<web-view src="https://byfile.disscode.cn/marked/marked.html?file={{url}}"></web-view>
3. 微信小程序自帶方式
通過wx.downloadFile下載pdf文件，再通過wx.openDocument展示。文章來源：http://www.zghlxwxcb.cn/news/detail-484547.html
wx.downloadFile({
url: 你的pdf地址,//可以是后臺傳過來的路徑
success: function(res) {
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
showMenu: "true",
fileType: "pdf",
success: function(res) {
//成功
}
})
}
})
模擬器上會直接下載到本地，真機調試可以實現(xiàn)預覽，并且安卓上點擊右上角可以直接下載到本地，在最近文件中可以找到。注意：蘋果右上角無直接下載文章來源地址http://www.zghlxwxcb.cn/news/detail-484547.html
到了這里，關于前端展示 PDF 預覽的幾種方法的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
