微信小程序实现显示pdf格式的两种方式

最新推荐文章于 2025-04-22 18:49:00 发布

IT前端小白

最新推荐文章于 2025-04-22 18:49:00 发布

阅读量1.8w

点赞数 10

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44884467/article/details/111736377

版权

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文聚焦信息技术领域，介绍了小程序中从后台返回显示pdf文件的两种方法。一是后台直接提供pdf地址，二是后端通过接口返回二进制流文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要介绍小程序中从后台返回显示pdf文件的两种方法

情况一：后台直接给了一个pdf地址

使用wx.downloadFile会发起get请求，下载文件资源到本地，wx.openDocument打开

// An highlighted block
export const downPDF = function (obj) {
    wx.downloadFile({
        url: obj.url,//pdf地址 例如：http://**.*****.***/ceshi/demo.pdf
        filePath: wx.env.USER_DATA_PATH + "/" + obj.name + ".pdf",//wx.env.USER_DATA_PATH 文件系统中的用户目录路径 filepath可有可无
        success(res) {
            if (res.statusCode === 200) {
                const tempFilePath = res.filePath//返回的文件临时地址，用于后面打开本地预览所用
                wx.openDocument({
                    filePath: tempFilePath,
                    showMenu: true,
                    fileType: "pdf",
                    success: function (res) {}
                })
            } else {
                showAutoError("协议打开失败，请重新打开");
            }
        },
        fail(res) {
            showAutoError("协议下载失败")
        }
    })
};

情况二：后端提供一个接口，返回一个二进制流文件

后端提供了一个接口，返回一个二进制流文件，FileSystemManager.writeFile写入，wx.openDocument打开

	//此处使用的时get请求
	var GET = function (url, params, isLoad = true, isShowError = true) {
		return new Promise(function(resolve){
			 wx.request({
		            url: baseUrl + url + "?_locale=zh_CN&" + getPostData(params),//get请求地址 getPostData为参数对象转16进制的方法 安全处理
		            method: 'GET',
		            timeout: 30000,
		            header: {
		                'content-type': 'application/x-www-form-urlencoded', // 默认值
		            },
		            responseType: 'arraybuffer',
		            success: function (res) {
		                if (res.statusCode == 200) {
		                    resolve(res.data);
		                } else {
		                    isShowError ? util.showError("系统繁忙，请稍后在试(" + res.statusCode + ")") : "";
		                }
		            },
		
		            fail: function (res) {
		                console.log(res)
		                util.showError("请求失败，请稍后再试")
		            },
		
		            complete: function (res) {
		                wx.hideLoading();
		            }
		        })
		    })
	    }
        //调接口发起请求
       const finHetongDetail = function(data){
		    return new Promise(function(resolve){
		        resolve(GET('接口.json',data))
		    })
		}
		finHetongDetail(params).then(function (res) {
			const FileSystemManager = wx.getFileSystemManager();//获取全局唯一的文件管理器
			//writeFile支持处理二进制文件流 不必转base64
			FileSystemManager.writeFile({
				filePath:wx.env.USER_DATA_PATH + "/" +name + ".pdf",
				data:res,
				encoding:"binary",//必填
				success (res){
					wx.openDocument({ // 打开文档
						filePath: wx.env.USER_DATA_PATH + "/" +name + ".pdf",  //拿上面存入的文件路径
						showMenu: true, // 显示右上角菜单
						success: function (res) {
							
						}
					})
				}
			})
		})