在線預(yù)覽PDF
用Taro3 React開發(fā)的demo地址： https://github.com/sweet-corns/pdf-taro
支持：H5端勒极、小程序端在線預(yù)覽pdf,適配安卓、ios虑鼎。
當(dāng)前Taro版本：yarn global add @tarojs/cli3.2.5
更新說明
1辱匿、v1.0.0 完成H5端、微信小程序端在線預(yù)覽PDF炫彩。
學(xué)習(xí)資料
1掀鹅、Taro: 一個(gè)開放式跨端跨框架解決方案 https://taro.aotu.io/
2、pdfh5: web/h5/移動(dòng)端PDF預(yù)覽插件 https://github.com/gjTool/pdfh5
H5端在線預(yù)覽PDF編寫代碼步驟簡(jiǎn)要概述
1媒楼、H5端在線預(yù)覽PDF：安裝插件pdfh5
#安裝插件
npm i pdfh5
2乐尊、定義查看PDF的事件，點(diǎn)擊觸發(fā)將pdfUrl地址保存在緩存中划址，跳轉(zhuǎn)頁面pdfPage,做H5端的新開頁面訪問PDF
3扔嵌、在新開頁面pdfPage中按需加載pdfh5插件,因?yàn)橹苯右雙dfh5在小程序生成之后會(huì)報(bào)錯(cuò)，記得引入pdfh5.css
import "pdfh5/css/pdfh5.css"
try {
// 緩存中的pdfUrl
let PDFurl = Taro.getStorageSync('pdfUrl')
if (PDFurl) {
if (process.env.TARO_ENV === 'h5') {
// 因?yàn)樾〕绦蛞雸?bào)錯(cuò)夺颤，所以按需加載 npm i pdfh5
let Pdfh5 = require('pdfh5')
//實(shí)例化
this.pdfh5 = new Pdfh5("#Pdf", {
pdfurl: PDFurl
});
}
}
} catch (e) {
// Do something when catch error
}
<View className='PdfCss' id="Pdf"></View>
小程序端在線預(yù)覽PDF編寫代碼簡(jiǎn)要概述
1痢缎、Taro.downloadFile :下載文件資源到本地,客戶端直接發(fā)起一個(gè) HTTPS GET 請(qǐng)求，返回文件的本地臨時(shí)路徑世澜，單次下載允許的最大文件為 50MB独旷。
2、Taro.openDocument 新開頁面打開文檔寥裂，支持格式"doc" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "pdf" 嵌洼，支持端weapp
3、定義查看PDF的事件封恰，點(diǎn)擊觸發(fā)麻养，通過內(nèi)置環(huán)境變量process.env.TARO_ENV做好H5端及小程序端的代碼區(qū)別
const gotoPDF = () => {
if (process.env.TARO_ENV === 'h5') {
Taro.setStorageSync('pdfUrl', 'https://static.zje.com/1619076422102_.pdf')
Taro.navigateTo({
url: '/pages/pdfPage/index',
})
} else if (process.env.TARO_ENV === 'weapp') {
Taro.downloadFile({
url: 'https://static.zje.com/1619076422102_.pdf',
success: function (res) {
var filePath = res.tempFilePath
// Taro.openDocument 新開頁面打開文檔，支持格式"doc" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "pdf" ,支持端weapp
Taro.openDocument({
filePath: filePath,
success: function (res) {
console.log('打開文檔成功')
}
})
}
})
}
}
