uniapp - 微信小程序平臺(tái)實(shí)現(xiàn)預(yù)覽 office 文件及保存下載到本地功能，將word/excel/ppt/pdf等
文件在小程序內(nèi)進(jìn)行預(yù)覽，用戶可以保存和轉(zhuǎn)發(fā)給好友進(jìn)行下載到手機(jī)（一鍵復(fù)制運(yùn)行）
效果圖
在uniapp微信小程序開發(fā)中，預(yù)覽文件、下載文件并保存到手機(jī)本地功能(支持ofice全套word/pdfipptlexcel等)，兼容安卓和蘋果端非常好用
本文有2種方案，愿意用哪個(gè)就用哪人，都有示例代碼和詳細(xì)說明。
1.方案一(完整源碼)
先來看方案一，具體代碼如下。
實(shí)現(xiàn)效果: 點(diǎn)擊文件附件，下載到本地
<view class="contact" @click="downloadFun(item.enclosure)">點(diǎn)擊下載</view>
// 下載附件
downloadFun(enclosure){
var that = this
//加載框動(dòng)畫
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, //臨時(shí)路徑
success: function(res) {
// console.log('打印res',res)
uni.showToast({
icon: 'success',
mask: true,
// title: '文件已保存：' + res.savedFilePath, //保存路徑
title: '下載成功' ,
duration: 2000,
});
//自動(dòng)打開文檔查看
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.方案二(完整源碼)
保存方式是: 點(diǎn)擊下載按鈕，通過微信選擇一個(gè)好友，發(fā)給給好友的方式，進(jìn)行保存。
<image @click="downloadsFun(infos.file,infos.id)" src="../../static/images/icon_download@2x.png" mode=""></image>
// 文件下載預(yù)覽轉(zhuǎn)發(fā)
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('轉(zhuǎn)發(fā)成功�。�！',data)
uni.showToast({
icon: 'success',
mask: true,
// title: '文件已保存：' + res.savedFilePath, //保存路徑
title: '轉(zhuǎn)發(fā)成功',
duration: 2000,
});
},
// fileName:'自定義文件名字.xlsx',
fail: console.error,
})
}
},
// fileName:'導(dǎo)出的文件名',
fail: console.error,
})
},
uniapp微信小程序平臺(tái)端，uniapp小程序下載ofice文檔，uniapp小程序?qū)ord/ excela/pdf保存到手機(jī)里，uniapp把ofice文檔打開預(yù)覽并保存或發(fā)給朋友文件，如何在uniapp中預(yù)覽下勤doc pdt，uniapp官方下ofice文件詳細(xì)教程，uniapp小程序開pdf文檔文件，uniapph么在小程序平臺(tái)上預(yù)覽下載ofice文件，uniapp怎么在小程序內(nèi)打開預(yù)覽下載word文檔，小程序網(wǎng)頁打開pdf功能，兼容安卓和蘋果系統(tǒng)uniapp微信小程序?qū)崿F(xiàn)下載+保存至本地+預(yù)覽”功能，uniapp開發(fā)微信小程序-下載文件、預(yù)覽文件，uniapp小程序前端實(shí)現(xiàn)的文件下載功能，uniapp微信小程序下載文件并保存到本地，uni-app小程序下載文件并保存到手機(jī)，uni-app微信小程序如何把文件預(yù)覽和保存到本地，uniapp小程序環(huán)境下如何下載并打開文件，uniapp在微信小程序端下載,.doc/.xlsl.ppt文件，uniapp在微信小程序如何打開文檔pdfWord、Excel、ppt，uniapp微信小程序跳轉(zhuǎn)下載文件ofice文檔文件，uniapp小程序怎么解決不能下載文檔文件，uniapp-微信小程序臺(tái)實(shí)現(xiàn)預(yù)覽 ofice 文件及保存下載到本地功能，將word/excelppt/pd等文件在小程序內(nèi)進(jìn)行預(yù)覽，用戶可以保存和轉(zhuǎn)發(fā)給好友進(jìn)行下載到手機(jī) (一鍵復(fù)制運(yùn)行)
(責(zé)任編輯：admin)本文地址：http://m.bmm520.net/info/java/2023/1015/24084.html
