uniapp获取 pdf文件流 并展示

1、流数据

uni.request({

url: this.$config.apiUrl+"/api/report/content/fill?code=bv.mf.refund.pay.voucher&busiNo=00201323051500148949",

header: {

'content-type': 'application/json;charset=utf-8',

'X-App-Code': 'weixin',

'X-Source': 'program',

'X-Token': store.getters.token

},

responseType:'arraybuffer',

success: (data) => {

const fs = uni.getFileSystemManager()

const filePath = wx.env.USER_DATA_PATH + '/' + Date.now() + '.pdf' // wx.env.USER_DATA_PATH 为微信提供的保存文件路径

console.log(filePath)

fs.writeFile({

filePath,

data: data.data, // 将 base64 转为 arrayuffer wx.base64ToArrayBuffer(res.replace(/[\r\n]/g, ''))

success (res) {

uni.openDocument({

showMenu: true,

fileType: 'pdf',

filePath,

success: function (res) {

console.log('打开文档成功')

}

})

},

fail (err) {

console.log('错误', err)

}

})

}

});

2 文件地址模式

复制代码
        uni.showLoading({
            title: '下载中'
        });
        //下载文件
        uni.downloadFile({ //只能是GET请求
            url:  this.$config.apiUrl+"/api/report/content/fill?code=bv.mf.refund.pay.voucher&busiNo=00201323051500148949", //请求地址(后台返回的码流地址)
           // url: this.$config.staticUrl+"/emptyOwner.png",
            success: (res) => {
                //下载成功
                if (res.statusCode === 200) {
                    //保存文件
                    let tempFile = res.tempFilePath;
                    //保存成功之后 打开文件
                    uni.getFileSystemManager().saveFile({
                        tempFilePath: tempFile,
                        // filePath: wx.env.USER_DATA_PATH + '/' + '上传成员.pdf',//自定义文件名
                        success(res) {
                            console.log(res)
                            uni.openDocument({
                                filePath: res.savedFilePath,
                                showMenu: true, //是否可以分享
                                success: (res) => {
                                    uni.hideLoading()
                                    console.log(res);
                                },
                                fail: (e) => {
                                    uni.showToast({
                                        title: '打开失败',
                                        icon: "error"
                                    })
                                }
                            })

                        }
                    })
                }
            },
            fail: (e) => {
                console.log(e, '文件下载失败')
                uni.showToast({
                    title: '文件下载失败',
                    icon: "error",
                })
            }
        });
相关推荐
妙团团几秒前
React学习之自定义tab组合组件
javascript·学习·react.js
2601_949809596 分钟前
flutter_for_openharmony家庭相册app实战+隐私设置实现
android·javascript·flutter
2601_949593658 分钟前
React Native 鸿蒙跨平台开发:LinearGradient 渐变动画效果
javascript·react native·react.js
kiss strong9 分钟前
springboot替换word模板&加入二维码&加水印&转为pdf
spring boot·后端·pdf
qq_1777673710 分钟前
React Native鸿蒙跨平台音乐播放器涉及实时进度更新、播放控制、列表交互、状态管理等核心技术点
javascript·react native·react.js·ecmascript·交互·harmonyos
2501_9209317014 分钟前
React Native鸿蒙跨平台实现了简单的商品图片轮播功能,为用户提供了直观的商品图片浏览体验,帮助用户全面了解商品外观
javascript·react native·react.js·ecmascript·harmonyos
切糕师学AI25 分钟前
Vue 中如何修改地址栏参数并重新加载?
前端·javascript·vue.js
软弹25 分钟前
Vue3如何融合TS
前端·javascript·vue.js
2501_920931707 小时前
React Native鸿蒙跨平台采用ScrollView的horizontal属性实现横向滚动实现特色游戏轮播和分类导航
javascript·react native·react.js·游戏·ecmascript·harmonyos
东东5169 小时前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设