Description of Requirement
In the WeChat applet, if you download a report file, you can directly obtain the base64 format of the report picture.
reference article
1. Wechat applet realizes picture download function
2. Wechat applet saves base64 pictures to phone album
Code
1、wxml
Adjust the style according to your own needs
<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 Modified
Variety
After obtaining the report data stream, first use writeFile to convert base64 to an image, and put the image address in the src attribute of the image component.
reference article
code modification
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)
}
})
}
})
}
}
})
}
})