【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>
相关推荐
大大大反派18 分钟前
ONLYOFFICE 8.2深度测评:集成PDF编辑、数据可视化与AI功能的强大办公套件
人工智能·信息可视化·pdf
zhentiya20 分钟前
濮良贵《机械设计》第十版课后习题答案全解PDF电子版
pdf
xiejunna33 分钟前
uniapp内把视频mp4的base64保持到手机文件系统
uni-app·视频base64保存手机
理竹子3 小时前
Typora导出pdf手动分页和设置字体样式
pdf·typora·markdown
七夕先生3 小时前
Qt:QPdfDocument渲染PDF文件时的信息丢失问题
c++·qt·pdf
咘噜biu3 小时前
PDF模板制作与填充(Java)
java·pdf·pdf模板
iamyzs3 小时前
剑指offer第二版(PDF+源码)
pdf
( •̀∀•́ )9203 小时前
如何使用XSL-FO生成PDF格式的电子发票的技术博文示例
java·pdf
流形填表3 小时前
pdf转excel;pdf中表格提取
pdf·excel
zhentiya3 小时前
工程数学线性代数(同济第七版)附册课后习题答案PDF
线性代数·pdf