技術標籤：前端

轉載請註明：https://blog.csdn.net/wuli_youhouli/article/details/111053753

本地軟體預覽

這裡的【PDF閱讀器】是在瀏覽器中預覽，可以選擇類似WPS Office的軟體查閱PDF。

參考：https://uniapp.dcloud.io/api/file/file?id=opendocument

uni.downloadFile({
  url: 'https://example.com/somefile.pdf',
  success: function (res) {
    var filePath = res.tempFilePath; // blob地址
    uni.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('開啟文件成功');
      }
    });
  }
});
 

線上預覽

一、DCloud外掛：office線上文件顯示

這個外掛的第三方介面（XDOC文件預覽雲服務：http://view.xdocin.com）一定時間後需要收費。

二、pdf.js

<view style="width: 100%;" >
    <web-view :src="url"></web-view>
</view>

data() {
    return {
        viewerUrl: '/hybrid/html/web/viewer.html',
        fileUrl: '',
        url:'',
    }
},
onLoad(options) {
    this.fileUrl ="https://example.com/"+options.path
    this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
}
 

跨域問題

報錯： “file origin doesnot match viewer”

原因：pdf.js不支援跨域檔案載入。

解決方法： 註釋下面三行程式碼

// view.js
if (origin !== viewerOrigin && protocol !== 'blob:') {  
    throw new Error('file origin does not match viewer\'s');  
}

預設預覽地址

// viewer.js
defaultUrl:{
    value:"" //置空
}

修改預覽檔案標題，【AZDLK.pdf】改成【檔案.pdf】

viewer.html 的<script>中新增獲取位址列引數值的方法。

// viewer.html
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = window.location.search.substr(1).match(reg);
    if (r!=null) return (r[2]); return null;
}

修改view.js的設定setTitle()

this.setTitle(decodeURIComponent(getQueryString('title'))); 

預覽時URL帶檔名稱

data() {
    return {
        viewerUrl: '/hybrid/html/web/viewer.html',
        fileUrl: '',
        url:'',
        title:'標題'
    }
},
onLoad(options) {
    this.fileUrl ="https://example.com/"+options.path
    this.title = options.title
    this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}&title=${this.title}`;
}