Zunächst einmal gibt es mehrere Möglichkeiten, PDF- und andere Dateien im Applet zu öffnen:
- Verwenden Sie wx.downloadFile() + wx.openDocument(), das mit WeChat geliefert wird
- Mit Web-View kann Webview in Uni-App PDF-Dateien direkt laden
- Sie können die im Internet erwähnten pdf.js verwenden, um dies zu erreichen (ich habe dies nicht verwendet, daher werde ich es nicht vorstellen).
Viele im Internet gefundene Informationen zeigen, dass Android mit der ersten Methode oben geöffnet werden kann, iOS jedoch nicht mit der ersten Methode. Dies gilt sowohl im Internet als auch in der Community, aber es scheint, dass der Fehler behoben wurde . Nach dem Test ist es nun sowohl für Android als auch für iOS verfügbar. kann geöffnet werden.
Wenn Sie auf einen solchen Fehler stoßen, können Sie Methode 1 auf Android und Webview auf Apple verwenden, um die Datei zu öffnen.
Ich lade Dateien mit der Uni-UI-Upload-Komponente hoch:
Ein hier zu erwähnender Fehler besteht darin, dass nach dem Festlegen des V-Modells durch diese Komponente und dem Hochladen der Datei der Wert des gelesenen V-Modells logischerweise die zuvor hochgeladenen Dateidaten sein sollte. Allerdings gibt es nach dem Drucken keine Daten, sondern erst nach dem Drucken. Nachdem Sie auf die Datei geklickt haben, um sie zu löschen, hat das V-Modell nach dem Lesen einen Wert. Dieser Fehler wurde vor langer Zeit in der Community gemeldet. Daher speichere ich die Dateidaten manuell, indem ich auf das ausgewählte Ereignis höre, und lösche sie dann entsprechende Daten im Array als Reaktion auf das Löschereignis. Dateidaten. Zweitens ist die Dateianzeige handschriftlich, da in meinem Projekt auf den Dateinamen geklickt werden muss, um eine Vorschau anzuzeigen. Ich habe display: none verwendet, um die ursprüngliche Dateianzeige der Komponente auszublenden.
<view style="width: 70%;margin: 0 auto;margin-bottom: 20rpx;">
<uni-file-picker v-model="fileList" title="最多选择9个文件" :list-styles="styleObject" :sourceType="['album', 'camera']"
file-mediatype="all" ref="files" :limit="11" :auto-upload="false" @select="select" @success="success"
@fail="fail" @progress="progress" @delete="deleteFile">
<view class="clickBtn">点击选择文件</view>
</uni-file-picker>
</view>
<view style="width: 70%;margin: 0 auto;margin-bottom: 20rpx;" v-for="(item, index) in ajaxFileList" :key="index">
<view class="flex justify-start align-center">
<view class="fileBox" @click="Preview(item)">{
{ item.name }}</view>
<view class="delBox" @click="delFile(index)">删除</view>
</view>
</view> // 获取上传状态
select(e) {
console.log('选择文件：', e)
e.tempFiles.forEach(item => {
this.ajaxFileList.push({//用一个变量单独存储上传的文件数据
name: item.cloudPath,
extname: item.extname,
url: item.path,
})
});
console.log(this.ajaxFileList);
},
deleteFile(e) {
console.log('删除文件：', e)
this.ajaxFileList.forEach((item, index) => {
if (e.tempFilePath === item.path) {
this.ajaxFileList.splice(index, 1)
}
})
console.log(this.ajaxFileList);
},
// 上传成功
success(e) {
console.log('上传成功')
},
// 上传失败
fail(e) {
console.log('上传失败：', e)
},
// 获取上传进度
progress(e) {
console.log('上传进度：', e)
},
Preview(item) {//用正则去识别不同文件类型，然后对应不同文件类型去做不同操作
console.log(item);
// 定义图片类型的正则表达式
const imageRegex = /(\.jpg|\.jpeg|\.png)$/i;
// 定义文档类型的正则表达式
const docRegex = /(\.doc|\.docx|\.pdf)$/i;
// 定义其他文件类型的正则表达式
const othersRegex = /(\.txt|\.csv|\.xlsx)$/i;
// 利用正则表达式判断文件类型
if (imageRegex.test(item.name)) {
console.log("图片类型");
this.lookImage(item.url)
} else if (docRegex.test(item.name)) {
console.log("文档类型");
this.lookFile(item.url)
} else if (othersRegex.test(item.name)) {
console.log("其他文件类型");
} else {
uni.showToast({
title: `未知文件类型`,
icon: 'none',
duration: 2000
})
}
},
delFile(index) {
console.log(index);
this.ajaxFileList.splice(index, 1)
},
lookImage(url) {
let imgArray = [];
imgArray[0] = url
uni.previewImage({
current: 0,
urls: imgArray
})
},
lookFile(url) {
uni.openDocument({
filePath: url,
success: function (res) {
console.log("打开文档成功");
},
fail: function (res) {
console.log("uni.openDocument,fail");
console.log(res)
},
complete: function (res) {
console.log("uni.openDocument,complete");
console.log(res)
}
});
},Wenn es sich bei Ihren Dateien um https- oder http-Onlineressourcen handelt:
uni.downloadFile({
url: url,
success: function (res) {
var filePath = res.tempFilePath;
console.log("下载文件：",res);
uni.openDocument({
filePath: filePath,
success: function (res) {
console.log("打开文档成功");
},
fail: function (res) {
console.log("uni.openDocument,fail");
console.log(res)
},
complete: function (res) {
console.log("uni.openDocument,complete");
console.log(res)
}
});
},
fail: function (res) {
console.log('uni.downloadFile,fail')
console.log(res)
},
complete: function (res) {
console.log('uni.downloadFile,complete')
console.log(res)
}},
);Die Anforderung, auf die ich dieses Mal gestoßen bin, bestand darin, die Vorschau von Dateien bei der Vorschau einzelner Bilder und beim Hochladen von Dateien zu unterstützen.
Wenn es eine Situation gibt, in der uni.openDocument auf Android, aber nicht auf iOS geöffnet werden kann, lesen Sie den folgenden Artikel.
https://blog.csdn.net/weixin_38673922/article/details/128626373