需求描述
微信小程序中，下载一个报告文件，直接可获取到的是报告图片的base64格式。
参考文章
1、微信小程序实现图片下载功能
2、微信小程序把base64的图片保存到手机相册
代码实现
1、wxml
样式根据自己的需要调
<view>
<!--在这个view里面可以显示报告图片-->
<view style="width:100%;height:240px">
<image src="{
{report}}" style="width: 80%; height: 220px; margin-left:10%"></image>
</view>
<!--在这个view里面有一个下载报告的按钮-->
<view>
<view bindtap="downloadReport">下载报告</view>
</view>
</view>
2、.js
Page({
/**
* 页面的初始数据
*/
data: {
report:"",
base64:"",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const that = this;
//调用接口，获取图片的base64
var base = that.getReportFile();
//赋值
that.setData({
base64: base,
report: "data:image/png;base64,"+that.data.base64
})
},
//将base64图片文件保存至用户系统相册
downloadReport(){
const that = this;
var filepath = wx.env.USER_DATA_PATH+'/test.png';
//获取文件管理器对象
var aa = wx.getFileSystemManager();
aa.writeFile({
filePath: filepath,
data: that.data.base64,
encoding:'base64',
success: res => {
wx.showLoading({
title: '正在保存...',
mask: true
});
//保存图片到相册
wx.saveImageToPhotosAlbum({
filePath: filepath,
success: function (res) {
wx.hideLoading();
wx.showToast({
title: '保存成功！',
icon: 'success',
duration: 2000//持续的时间
})
},
fail: function (err) {
wx.hideLoading();
if(errerrMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response"){
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击下载按钮进行保存',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败，将无法保存到相册哦~',
showCancel: false,
})
}
},
fail(failData) {
console.log("failData", failData)
},
complete(finishData) {
console.log("finishData", finishData)
}
})
}
})
}
}
})
}, fail: err => {
console.log(err)
}
})
}
})
---------------------2022/06/23修改
变化
获取到报告数据流后，先用writeFile将base64转为图片，将图片地址放到image组件src属性中。
参考文章
微信小程序中base64转换成图片；uni-app小程序base64转图片；微信小程序base64文件转图片；微信小程序base64图片转图片
代码修改
1、.js
Page({
/**
* 页面的初始数据
*/
data: {
report:'',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const that = this;
//调用接口，获取图片的base64
var base = that.getReportFile();
that.base64ToSrc(base);
},
//将base64转为图片
base64ToSrc(base64) {
const that = this;
//获取文件管理器对象
var fsm = wx.getFileSystemManager();
fsm.writeFile({
filePath,
data: base64,
encoding: 'base64',
success() {
that.setData({
report:filePath
})
},
fail() {
console.log('ERROR');
},
});
},
//将base64图片文件保存至用户系统相册
downloadHsjcReport(){
const that = this;
wx.showLoading({
title: '正在保存...',
mask: true
});
//保存图片到相册
wx.saveImageToPhotosAlbum({
filePath: that.data.report,
success: function (res) {
wx.hideLoading();
wx.showToast({
title: '保存成功！',
icon: 'success',
duration: 2000//持续的时间
})
},
fail: function (err) {
wx.hideLoading();
if(err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response"){
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击下载按钮进行保存',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败，将无法保存图片到相册',
showCancel: false,
})
}
},
fail(failData) {
console.log("failData", failData)
},
complete(finishData) {
console.log("finishData", finishData)
}
})
}
})
}
}
})
}
})