小程序 H5 PDF预览(wx.openDocument)

H5嵌入小程序时,h5中使用预览、下载是正常的。唯独小程序中是不可以的。

话不多说上干货:

1、首先要在入口文件中判断当前环境是什么

const { userAgent } = window.navigator;
const ismini = /miniProgram/i.test(userAgent);		//微信小程序
if(ismini){
	const url = encodeURIComponent(`${window.location.origin}/epolicy/getDocument?        businessType=1&policyType=${policyType}&tradeTime=${tradeTime}&businessCode=${this.policyNo}`)
	window.wx.miniProgram.navigateTo({
		url: `/pages/load/onload/index?url=${url}`,
		
	});
}else{
	window.open(`${window.location.origin}/epolicy/getDocument?businessType=1&policyType=${policyType}&tradeTime=${tradeTime}&businessCode=${this.policyNo}`)
				}

2、在小程序的承接页面中/pages/load/onload/index加入代码

var config = require('../../../utils/config.js');
const app = getApp()
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		newsrc: true,
		name: '',
		code: '',
	},
	/**
	 * 监听页面加载
	 */
	onLoad: function(options) {
		var arr = decodeURIComponent(options.url).split("&");
		var obj = {};
		for (var i = 0; i < arr.length; i++) {
			var g = arr[i].split("=");
			obj[g[0]] = g[1];
		}
		if (obj.policyNo) {
			this.setData({
				name: '电子发票',
				code: obj.policyNo
			})
		}
		let newurl = decodeURIComponent(options.url)
		wx.request({
			url: newurl,
			header: {
				"content-type": "application/json",
			},
			responseType: "arraybuffer", //注意这里的responseType
			success: (result) => {
				var fileManager = wx.getFileSystemManager();
				var FilePath = wx.env.USER_DATA_PATH + "/" + `${this.data.code}_invoice.pdf`;
				fileManager.writeFile({
					data: result.data,
					filePath: FilePath,
					encoding: "binary", //编码方式 
					success: res => {
						this.setData({
							newsrc: false
						})
						wx.openDocument({ //我这里成功之后直接打开
							filePath: FilePath,
							showMenu: true,
							fileType: "pdf",
							success: result => {
								console.log("打开文档成功");
							},
							fail: err => {
								console.log("打开文档失败", err);
							}
						});
					},
					fail: res => {
						wx.showToast({
							title: '导出失败!',
							icon: 'none', //默认值是success,就算没有icon这个值,就算有其他值最终也显示success
							duration: 2000, //停留时间
						})
						console.log(res);
					}
				})
			},
			fail(err) {
				console.log(err)
			}
		})
	},

	/**
	 * 监听页面初次渲染完成
	 */
	onReady: function() {


	},

	/**
	 * 监听页面显示
	 */
	onShow: function() {

		if (this.data.newsrc == false) {
			this.setData({
				newsrc: true
			})
		}
	},

	/**
	 * 监听页面隐藏
	 */
	onHide: function() {

		if (this.data.newsrc == false) {
			this.setData({
				newsrc: true
			})
		}
	},

	/**
	 * 监听页面卸载
	 */
	onUnload: function() {},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {}
})

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni.opendocument 是一个文件格式,它是一种开放且自由的文档格式。它是一种基于XML的标准,通过使用统一的结构和标记语言,使得不同的软件应用程序可以互相交换和共享文档内容。 使用uni.opendocument格式的文件具有许多优点。首先,它是一个开放的标准,并且没有专有的许可证要求,这意味着任何人都可以自由地使用、修改和分发这种格式的文件。这允许用户在不同的操作系统和软件平台上无缝地交换文件,而不需要担心文件兼容性的问题。 其次,uni.opendocument采用XML标记语言,这意味着文件的内容可以以一种结构化和易于理解的方式存储和呈现。这使得用户可以轻松地对文档进行编辑、格式化和扩展。此外,XML格式还具有可读性强的特点,这对于需要对文件进行自动化处理和分析的用户来说是非常有帮助的。 另外,uni.opendocument 格式还支持多种类型的文档,包括文字处理文档、电子表格、演示文稿等等。无论是个人用户、教育机构还是商业组织,都可以使用这种格式来创建和共享不同类型的文档。 总结来说,uni.opendocument 是一个开放、自由且具有良好兼容性的文件格式。它可以帮助用户在不同的软件环境中自由交换和共享文件内容,并且具有易于编辑和扩展的特点。我们可以使用uni.opendocument格式来创建各种类型的文档,并将其应用于不同的领域和用途中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值