大概就是这样的咯，文件展示到页面上，点击文件下载并预览该文件；
通过点击事件handleDownLoad(file.path)，file.path为文件的地址；
<view class="files">
<view class="cont" v-for="(file, index) in dataInfo.experience" :key="index" @click="handleDownLoad(file.path)">
<image
:src="file.path.split('.')[1] == 'word' ? '/static/images/icons/icon_word.png' : '/static/images/icons/icon_pdf.png'"
mode="scaleToFill"
/>
<text>{{ file.filename }}</text>
</view>
</view>功能代码：文章来源：https://www.toymoban.com/news/detail-640666.html
// 文件下载
const handleDownLoad = (path: string) => {
if (!path) return;
Loading("加载中");
uni.downloadFile({
url: fullUrl(path),//完整地址
success: res => {
if (res.statusCode === 200) {
uni.getFileSystemManager().saveFile({
tempFilePath: res.tempFilePath,
success: function (res1) {
const savedFilePath = res1.savedFilePath;
HideLoading();
// 打开文件
uni.openDocument({
filePath: savedFilePath,
success: function (res2) {
console.log(res2);
}
});
}
});
} else {
Toast("下载失败", {
icon: "error"
});
}
}
});
};样式的话，大家根据自己需求写吧，我只功能代码展示出来就可以了；文章来源地址https://www.toymoban.com/news/detail-640666.html
到了这里，关于uniapp文件下载并预览的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
