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

https://developers.weixin.qq.com/community/develop/doc/000ea83ba5cb58a586feb827c59c00跟这个问题一样
解决办法就是在onshow中奖地址清了重新赋值,就是缓存的问题

<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>
<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} = optionsthis.title = titlethis.desc = descthis.reportId = id// this.pdfurl = decodeURIComponent(url)// 设置titleuni.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 = thisctx.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.tempFilePathconsole.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 {// 内容绘制完毕,但是剩下的内容宽度不到lineMaxWidthif (i === content.length - 1) {ctx.fillText(content.substring(drawIndex), drawX, drawY);}}}}},}}
</script>
<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/767222.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

车道线检测论文:《Ultra Fast Structure-aware Deep Lane Detection》

该论文标题为《Ultra Fast Structure-aware Deep Lane Detection》&#xff0c;作者是浙江大学计算机科学与技术学院的Zequn Qin、Huanyu Wang和Xi Li。论文提出了一种新颖的、简单而有效的车道检测方法&#xff0c;旨在解决具有挑战性场景下的车道检测问题&#xff0c;并实现极…

借用QStyledItemDelegate 在DataView中创建各种子控件

在Model/View 中&#xff0c;二维表格的输入方式可能各种各样&#xff0c;我们需要在单元格嵌入各种类型控件&#xff0c;但是能把各种控件整合一个委托类吗&#xff1f;本文进行了尝试。将创建各种控件的逻辑整合到一个委托类。效果图如下&#xff1a; 本文实现了在DataView 的…

Android 带html标签文本添加自定义超链接跳转

Android 带html标签文本添加自定义超链接跳转 背景&#xff1a; 在项目开发过程中&#xff0c;需要在用户协议等文本中加入超链接跳转到APP内的其他界面&#xff0c;正常情况下我们都会知道用Html.fromHtml来识别html标签中的超链接&#xff0c;比如<a href"http://www…

【SpringMVC】知识汇总

SpringMVC 短暂回来&#xff0c;有时间就会更新博客 文章目录 SpringMVC前言一、第一章 SpingMVC概述二、SpringMVC常用注解1. Controller注解2. RequestMapping注解3. ResponseBody注解4. RequestParam5. EnableWebMvc注解介绍6. RequestBody注解介绍7. RequestBody与RequestP…

Echarts功能记录

基础配置 工具箱toolbox 对应功能 案例中使用到的第三方脚本

SpringBoot 启用 Https,生成 jks 自签证书

使用 Java 提供的工具生成 jks 自签证书 keytool 是 Java Development Kit (JDK) 中的一个工具&#xff0c;用于管理公钥和私钥对以及相关的证书。以下命令用于生成一个密钥对并将其存储在密钥库中&#xff1a; keytool -genkeypair -alias www.example.com -keyalg RSA -key…

解决Animate.css动画效果无法在浏览器运行问题

背景 在开发官方网站的时候&#xff0c;临时更换了电脑&#xff0c;发现原本正常的动画效果突然不动了。 经过 chrome、Microsoft Edge都无法运行。 Animate.css | A cross-browser library of CSS animations. 问题排查 通过审查元素后发现类名是注入并且生效的。 验证 然…

开源科学可视化软件

目录 0 参考链接 1 GR 2 VisIt 3 Inviwo 4 Voreen 5 MegaMol 6 ParaView 7 ROOT 8 Mayavi 9 PyQtGraph 10 vedo 11 Glumpy 12 SCIRun 13 Vispy 14 K3D 15 VTK 16 yt 17 Veusz 18 PyVista 18 TTK 20 Ipyvolume 21 Polyscope 22 GLVis 23 3D Slicer …

【图解物联网】第3章 物联网设备

3.1 设备——通向显示世界的接口 3.1.1 为什么要学习设备的相关知识 经过前两章的学习&#xff0c;想必各位读者已经掌握物联网这个词描绘出的世界和用于实现物联网的系统架构了。基于这点&#xff0c;这一章将会为大家介绍在物联网世界中起着核心作用的因素&#xff0c;即设…

atoi函数(想要彻底了解atoi函数,那么看这一篇就足够了!)

前言&#xff1a;在学习C语言的时候&#xff0c;我们知道每个字符都有其所对应的ASCII码值&#xff0c;当我们使用49来打印字符时&#xff0c;打印出来的就是数字字符 ‘ 1 ’&#xff0c;那么字符能否直接被转换成对应的整型数字呢&#xff1f;答案是当然可以&#xff0c;这时…

印度洋涡旋统计

印度洋涡旋统计 clear;clc;clf;close all; %% 读取涡旋半径、时间范围、经纬度信息,以及涡旋点的经纬度;半径路径和涡旋极性; file2=‘D:\matlab_work\accept_work\涡旋统计的平面分布\eddy_trajectory_2.0exp_19930101_20200307.nc’; time=double(ncread(file2,‘time’)…

一文搞懂数据链路层

数据链路层 1. 简介2. MAC3. 以太网 1. 简介 &#xff08;1&#xff09;概念 链路(link)是一条无源的点到点的物理线路段&#xff0c;中间没有任何其他的交换结点。 数据链路(data link) 除了物理线路&#xff08;双绞线电缆、同轴电缆、光线等介质&#xff09;外&#xff0…

2024-03-24 成长-周复盘-责任与能力-事情的推进与落地和完成

摘要: 过于一周发生太多事情&#xff0c;林林总总&#xff0c;有些事情为了避免重蹈覆辙&#xff0c;要进行回溯复盘。 主要集中于做事方式&#xff0c;做事方法&#xff0c;更多的是集中于失败的做事方式。 在认知层面&#xff0c;要通过做事的结果&#xff0c;来反向推导做…

详细安装步骤:vue.js 三种方式安装(vue-cli)

Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09;是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。 三种 Vue.js 的安装方法&…

二进制王国【蓝桥杯算法双周赛】

原题链接:https://www.lanqiao.cn/problems/17035/learning/?contest_id177 #include <bits/stdc.h> using namespace std;bool cmp(const string &x,const string &y) {return xy<yx; }int main() {int n; cin>>n;vector<string> vt(n);for(in…

Dockerfile优化

使用多阶段构建 go应用程序 # Build stage FROM golang:1.16 AS build WORKDIR /app COPY . . RUN go build -o myapp .# Runtime stage FROM alpine:latest WORKDIR /root/ COPY --frombuild /app/myapp . CMD ["./myapp"]Nodejs应用程序 # Build stage FROM nod…

matlab 将矩阵写入文件

目录 一、概述1、算法概述2、主要函数二、将矩阵写入到文本文件三、将矩阵写入电子表格文件四、将矩阵写入指定的工作表和范围五、将数据追加到电子表格六、将矩阵数据追加到文本文件七、参考链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此…

Debezium日常分享系列之:Debezium2.5稳定版本之处理常见问题

Debezium日常分享系列之&#xff1a;Debezium2.5稳定版本之处理常见问题 一、配置和启动错误二、MySQL 不可用三、Kafka Connect stops gracefully四、Kafka Connect 进程崩溃五、Kafka变得不可用六、MySQL 清除 binlog 文件七、Debezium技术总结 下面描述 Debezium 如何处理各…

代码随想录阅读笔记-栈与队列【删除字符串中的所有相邻重复项】

题目 给出由小写字母组成的字符串 S&#xff0c;重复项删除操作会选择两个相邻且相同的字母&#xff0c;并删除它们。 在 S 上反复执行重复项删除操作&#xff0c;直到无法继续删除。 在完成所有重复项删除操作后返回最终的字符串。答案保证唯一。 示例&#xff1a; 输入&am…

了解交互设计:定义、解析及案例演示!

交互设计作为现代设计领域的一个重要分支&#xff0c;对用户体验和产品的成功至关重要。然而&#xff0c;许多人并不了解交互设计的定义和实践方法。本文将深入分析交互设计的概念和重要性&#xff0c;分享精彩的案例&#xff0c;推荐有用的交互设计工具&#xff0c;帮助您创造…