uniapp - 微信小程序平臺實現預覽 office 文件及保存下載到本地功能,將word/excel/ppt/pdf等
文件在小程序內進行預覽,用戶可以保存和轉發給好友進行下載到手機(一鍵復制運行)
效果圖
在uniapp微信小程序開發中,預覽文件、下載文件并保存到手機本地功能(支持ofice全套word/pdfipptlexcel等),兼容安卓和蘋果端非常好用
本文有2種方案,愿意用哪個就用哪人,都有示例代碼和詳細說明。

1.方案一(完整源碼)
先來看方案一,具體代碼如下。
實現效果: 點擊文件附件,下載到本地

<view class="contact" @click="downloadFun(item.enclosure)">點擊下載</view>
// 下載附件
downloadFun(enclosure){
var that = this
//加載框動畫
uni.showLoading({title: '正在下載……'});
// console.log(that.hostUrl + '/uploads'+ enclosure)
uni.downloadFile({
url: that.hostUrl + '/uploads'+ enclosure,//下載地址接口返回
success: (data) => {
console.log('打印data',data)
if (data.statusCode === 200) {
//隱藏加載框
uni.hideLoading();
//文件保存到本地
uni.saveFile({
tempFilePath: data.tempFilePath, //臨時路徑
success: function(res) {
// console.log('打印res',res)
uni.showToast({
icon: 'success',
mask: true,
// title: '文件已保存:' + res.savedFilePath, //保存路徑
title: '下載成功' ,
duration: 2000,
});
//自動打開文檔查看
setTimeout(() => {
var filePath = res.savedFilePath;
uni.openDocument({ //新開頁面打開文檔,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx。
filePath: filePath,
showMenu: true,
success: function (res) {
console.log('打開文檔成功');
}
});
}, 2000)
}
});
}
},
fail: (err) => {
console.log(err);
uni.showToast({
icon: 'none',
mask: true,
title: '文件下載失敗',
});
},
});
},
2.方案二(完整源碼)
保存方式是: 點擊下載按鈕,通過微信選擇一個好友,發給給好友的方式,進行保存。

<image @click="downloadsFun(infos.file,infos.id)" src="../../static/images/icon_download@2x.png" mode=""></image>
// 文件下載預覽轉發
downloadsFun(myfile, myid){
var that = this;
uni.showLoading({
title: '正在下載……'
});
wx.downloadFile({
url:that.hostUrl + myfile, // 下載url
// filePath: wx.env.USER_DATA_PATH,
success (res) {
console.log('ressss',res)
if(res.statusCode == 200) {
//隱藏加載框
uni.hideLoading();
console.log('res.statusCode',res)
// that.openFileEvs(res)
wx.shareFileMessage({
filePath: res.tempFilePath,
// fileType: 'xlsx',
success(data) {
console.log('轉發成功!!',data)
uni.showToast({
icon: 'success',
mask: true,
// title: '文件已保存:' + res.savedFilePath, //保存路徑
title: '轉發成功',
duration: 2000,
});
},
// fileName:'自定義文件名字.xlsx',
fail: console.error,
})
}
},
// fileName:'導出的文件名',
fail: console.error,
})
},
uniapp微信小程序平臺端,uniapp小程序下載ofice文檔,uniapp小程序將word/ excela/pdf保存到手機里,uniapp把ofice文檔打開預覽并保存或發給朋友文件,如何在uniapp中預覽下勤doc pdt,uniapp官方下ofice文件詳細教程,uniapp小程序開pdf文檔文件,uniapph么在小程序平臺上預覽下載ofice文件,uniapp怎么在小程序內打開預覽下載word文檔,小程序網頁打開pdf功能,兼容安卓和蘋果系統uniapp微信小程序實現下載+保存至本地+預覽”功能,uniapp開發微信小程序-下載文件、預覽文件,uniapp小程序前端實現的文件下載功能,uniapp微信小程序下載文件并保存到本地,uni-app小程序下載文件并保存到手機,uni-app微信小程序如何把文件預覽和保存到本地,uniapp小程序環境下如何下載并打開文件,uniapp在微信小程序端下載,.doc/.xlsl.ppt文件,uniapp在微信小程序如何打開文檔pdfWord、Excel、ppt,uniapp微信小程序跳轉下載文件ofice文檔文件,uniapp小程序怎么解決不能下載文檔文件,uniapp-微信小程序臺實現預覽 ofice 文件及保存下載到本地功能,將word/excelppt/pd等文件在小程序內進行預覽,用戶可以保存和轉發給好友進行下載到手機 (一鍵復制運行)
(責任編輯:admin)本文地址:http://m.bmm520.net/info/java/2023/1015/24084.html