【webView中打开pdf文件,再点击设置切换页面后,再点击返回,则pdf无法正常显示,显示空白?】

https://developers.weixin.qq.com/community/develop/doc/000ea83ba5cb58a586feb827c59c00跟这个问题一样

解决办法就是在onshow中奖地址清了重新赋值,就是缓存的问题

html 复制代码
<div>
		<web-view :src="pdfurl" :webview-styles="webviewStyles" >
			<cover-view class="share-button">
				<cover-view class="share-txt" >
					<cover-image @click="goPages(`/subPages/Industry/report/download?src=${pdfurl}&title=${title}`)" class="share-img" src="https://static.solarbe.com/zhangshang/xiazai.png"></cover-image>
				</cover-view>
			</cover-view>
		</web-view>
		(生成分享图片)
		<canvas class="canvas" canvas-id="imgCanvas" style="width: 100%;height: 100%;position: absolute; top: -1000px; left: -1000px;"></canvas>
	</div>
js 复制代码
<script>
	import {reportLog} from '@/api/report/index.js'
	import util from '@/common/js/util.js';
	import {reportLists} from '@/api/report/index.js'
	export default{
		data(){
			return{
				title:'',
				desc:'',
				reportId:0,
				pdfurl:'',
				powerw: 0,
				shareUrl:'',
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				}
			}
		},
		//分享到聊天
		onShareAppMessage() {
			console.log(this.shareUrl,'this.shareUrl')
			return {
				title: this.title,
				path: '/subPages/Industry/webView?title='+this.title+'&desc='+this.desc,
				imageUrl: this.shareUrl
			};
		},
		onShow() {
			 let params = {
			 	page:uni.getStorageSync('productObj').page
			 }
			 //这里一定要清除一下,不然浏览器会觉得地址一样,不做任何操作
			 this.pdfurl='';
			 //这里要重新赋值,因为他在onshow的时候没有拿到
			 reportLists(params).then((res)=>{
				 res.data.forEach((item)=>{
					 if(item.id==this.reportId||uni.getStorageSync('productObj').id){
						 this.pdfurl = item.url;
					 }
				 })
			 })
		},
		onLoad(options) {
			let {title,desc,id,url} = options
			this.title = title
			this.desc = desc
			this.reportId = id
			// this.pdfurl = decodeURIComponent(url)
			// 设置title
			uni.setNavigationBarTitle({
			  title
			})
			// 设置分享
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			});
			// 浏览量
			this.reportLog()
			let message = uni.getSystemInfoSync(); //获取手机信息
			this.powerw = message.windowWidth / 375;
			const ctx = uni.createCanvasContext('imgCanvas');
			ctx.font = 'bold 15rpx serif'
			ctx.setTextAlign('left')
			ctx.setFillStyle("#000000")
			/**
			ctx: 画布的上下文环境
			content: 需要绘制的文本内容
			drawX: 绘制文本的x坐标
			drawY: 绘制文本的y坐标
			lineHeight:文本之间的行高
			lineMaxWidth:每行文本的最大宽度
			lineNum:最多绘制的行数
			*/
			this.textPrewrap(ctx, this.desc, 15 * this.powerw, 30 * this.powerw, 20 * this.powerw, 350, 8);
			var that = this
			ctx.draw(true, () => {
				setTimeout(function() {
					uni.canvasToTempFilePath({
						canvasId: 'imgCanvas',
						fileType: 'jpg',
						x: 0,
						y: 0,
						width: 500,
						height: 400,
						destWidth: 500,
						height: 400,
						success: function(res) {
							that.shareUrl = res.tempFilePath
							console.log(that.shareUrl,11111)
							// 在这里保存图片
						},
						fail: function(error) {
							console.log(error)
						},							
					})
				}, 100)
			})
		},
		methods:{
			reportLog(){
				let params = {
					'report_id':this.reportId
				}
				reportLog(params).then((res)=>{
					
				})
			},
			goPass(url){
				uni.redirectTo({
					url:url
				})
			},
			textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
				var drawTxt = ''; // 当前绘制的内容
				var drawLine = 1; // 第几行开始绘制
				var drawIndex = 0; // 当前绘制内容的索引
				content = content.replace(/\s*/g,"")
				// 判断内容是否可以一行绘制完毕
				if (ctx.measureText(content).width <= lineMaxWidth) {
					ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
				} else {
					for (var i = 0; i < content.length; i++) {
						drawTxt += content[i];
						if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
							if (drawLine >= lineNum) {
								ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
								break;
							} else {
								ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
								drawIndex = i + 1;
								drawLine += 1;
								drawY += lineHeight;
								drawTxt = '';
								// if(uni.getSystemInfoSync().osName === "ios"){
									
								// }
								// console.log(drawY,'drawY',content)
							}
						} else {
							// 内容绘制完毕,但是剩下的内容宽度不到lineMaxWidth
							if (i === content.length - 1) {
								ctx.fillText(content.substring(drawIndex), drawX, drawY);
							}
						}
					}
				}
			},
		}
	}
</script>
css 复制代码
<style scoped>
	image{
		width: 30rpx;
	}
	.dowload{
		height: 100rpx;
	}
	.share-button {
	  z-index: 999999;
	  position: fixed;
	  color: red;
	  display: flex;
	  justify-content: end;
	  align-items: center;
	  bottom:300rpx;
	  width:100%;
	  height: 100rpx;
	  right: 20rpx;
	}
</style>
相关推荐
BD_Marathon10 小时前
PyPDFLoader和MinerU加载pdf文件
pdf
万岳科技程序员小金12 小时前
直播电商带货系统源码、小程序/APP开发:平台搭建方案全面解析
小程序·私域直播小程序·私域直播软件开发·私域直播app·直播电商系统源码·直播电商平台搭建
2301_322414280416 小时前
springboot学生课堂出勤统计系统15835-计算机毕设 原创(免费领源码+部署教程+开发环境)
java·mysql·随机森林·微信小程序·uni-app·微信开发者工具·推荐算法
ydjs678899-bot1 天前
如何在Java中打印pdf静默打印和打印对话框选择
java·python·pdf
SamChan901 天前
PDF 翻译后 1,250 变成 1.250,是错了吗?用 Python 核对数字格式
python·pdf·ocr·数据校验·文档翻译
上海秉坤2 天前
小程序如何打通门店?预约、券码核销与会员服务记录的流程设计
小程序·零售
开开心心就好2 天前
打印机卡住打不了?一键清理卡死打印队列
服务器·开发语言·算法·pdf·ocr·idea·visual studio code
派小心.2 天前
网站统计采样数据的误差核对
大数据·服务器·前端·数据库·人工智能·小程序·数据分析
河北清兮网络科技2 天前
广告联盟 APP 介绍:搭建属于自己的流量变现平台
小程序·app·产品经理·短剧app·广告联盟
打工仔折腾 AI2 天前
在线PDF工具隐私焦虑?把BentoPDF部署到极空间NAS本地处理
人工智能·后端·python·pdf·ai agent 实战