js 文件预览 在窗口设置“自定义名称”

1. 最近需要做一个点击表格某一列的标题,预览当前文件的一个小功能。本身功能很简单,点击该标题,预览文件,那么拿到他对应的文件地址,在浏览器打开就行了。

2. 事实如此,使用window.open(url, '_blank');就行,只要你地址正确,那么在浏览器的窗口就打开了一个新的文件,(注意这里打开的是pdf格式,其它格式的需要对应的方法),然而问题来了,文件是正常打开了,但是浏览器窗口的标题确不是我想要的,为此设置了半天,还是不行。

3.找了半天原因,原来是 浏览器 “新窗口的名字是由浏览器根据url 定义的,本身无法设置”,但是现在有这个需求,尝试了很多方法都不行,后来发现了window.open 本身有许多内置属性,例如:

width:窗口的宽度;

height:窗口的高度;

top:窗口距离屏幕顶部的距离,默认0;

left:窗口距离屏幕左侧的距离,默认0;

menubar:是否显示菜单栏,yes\no;

toolbar:是否显示工具栏,yes\no;

location:是否显示地址栏,yes\no;

status:是否显示状态栏,yes\no;

resizable:是否允许用户调整窗口大小,yes\no;

scrollbars:是否显示滚动条,yes\no。

打开一个新窗口本质是打开一个页面,那么肯定有 body,document 这些元素,那么我们直接设置他的title不就行了,事实还真可以。

let pages= window.open(encodeURI(basePreviewUrl + ret.body.viewPath), '_blank');
 // 强行设置标题     新窗口的名字是由浏览器定义的 本身无法设置
 setTimeout(function(){
        pages.document.title = fileName 
 },3000);

//fileName  是名称  open 里面是地址 换成你们自己的

注意这里的定时器:如果你要加载的文件时间很长的话,不加定时器标题会被浏览器生成的标题覆盖了,后面的时间看你们实际需要多长时间。

4. 既然这样可以加上的话,那很简单了,我们直接往里面扔个iframe进去不就行了,把它的宽、高、边框设置为空不就行了,具体代码如下:

 // 强行设置标题  方法
                 openUrl(url, title) { 
                    //console.log('url',url,title)
                      // 检查是否已经存在相同URL的窗口,不要重复打开
                        if (vue.flagYu === url) {
                            return; 
                        }
                      const newWindow= window.open('about:blank', title);
                      newWindow.document.title = title;
                      let iframe = document.createElement('iframe');
                      iframe.src = url;
                      iframe.style.width = '100%';
                      iframe.style.height = '100vh';
                      iframe.style.margin = '0';
                      iframe.style.padding = '0';
                      iframe.style.overflow = 'hidden';
                      iframe.style.border = 'none';
                      newWindow.document.body.style.margin = '0';
                      newWindow.document.body.appendChild(iframe);
                      window.newWindow = newWindow;
                      vue.flagYu = url;
  },

这里是用vue 封装了一个方法,需要的话直接传参数就行了,传url,和要显示的标题就行。

this.openUrl('','标题')。

结束。。

如果对您有用,请点个赞哦(ღ( ´・ᴗ・` )比心)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

挑战杯 基于大数据的时间序列股价预测分析与可视化 - lstm

文章目录 1 前言2 时间序列的由来2.1 四种模型的名称: 3 数据预览4 理论公式4.1 协方差4.2 相关系数4.3 scikit-learn计算相关性 5 金融数据的时序分析5.1 数据概况5.2 序列变化情况计算 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 &…

Java Swing游戏开发学习3

世界和摄像机World and Camera 这一节实现的是超过屏幕尺寸的世界地图,这里的世界不是我们的地球,指的是游戏中的虚拟世界。 这里的游戏示例是一个action RPG,即动作角色扮演游戏(action role play game),因此地图尺寸超过了屏幕…

精通Django模板(模板语法、继承、融合与Jinja2语法的应用指南)

模板: 基础知识: ​ 在Django框架中,模板是可以帮助开发者快速⽣成呈现给⽤户⻚⾯的⼯具模板的设计⽅式实现了我们MVT中VT的解耦(M: Model, V:View, T:Template),VT有着N:M的关系,⼀个V可以调⽤任意T,⼀个…

【Spring】 AOP面向切面编程

文章目录 AOP是什么?一、AOP术语名词介绍二、Spring AOP框架介绍和关系梳理三、Spring AOP基于注解方式实现和细节3.1 Spring AOP底层技术组成3.2 初步实现3.3 获取通知细节信息3.4 切点表达式语法3.5 重用(提取)切点表达式3.6 环绕通知3.7 切…

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(8)-Ant Design Blazor前端框架搭建

前言 前面的章节我们介绍了一些值得推荐的Blazor UI组件库,通过该篇文章的组件库介绍最终我选用Ant Design Blazor这个UI框架作为ToDoList系统的前端框架。因为在之前的工作中有使用过Ant Design Vue、Ant Design Angular习惯并且喜欢Ant Design设计规范和风格&…

集成TinyMCE富文本编辑器

若依的基础上集成TinyMCE富文本编辑器 前端bootstrap TinyMCE官网链接 TinyMCE所需静态资源下载链接 开源项目-若依链接 将TinyMCE静态资源包放入项目中&#xff1b; 代码引入css&#xff1a; <!-- 引入TinyMCE CSS --><link th:href"{/ajax/libs/tinymce/j…

XTuner InternLM-Chat 个人小助手认知微调实践

要解决的问题&#xff1a; 如何让模型知道自己做什么&#xff0c;是什么样身份。是谁创建了他&#xff01;&#xff01;&#xff01; 概述 目标&#xff1a;通过微调&#xff0c;帮助模型认清了解对自己身份弟位 方式&#xff1a;使用XTuner进行微调 微调前&#xff08;回答…

大数据 - Spark系列《十》- rdd缓存详解

Spark系列文章&#xff1a; 大数据 - Spark系列《一》- 从Hadoop到Spark&#xff1a;大数据计算引擎的演进-CSDN博客 大数据 - Spark系列《二》- 关于Spark在Idea中的一些常用配置-CSDN博客 大数据 - Spark系列《三》- 加载各种数据源创建RDD-CSDN博客 大数据 - Spark系列《…

Java基于微信小程序的智能停车场管理系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【计算机网络】数据链路层|封装成帧|透明传输|差错检测|PPP协议|CSMA/CD协议

目录 一、思维导图 ​ 二、数据链路层功能概述 1.数据链路层概述 2.数据链路层功能概述——封装成帧 3.数据链路层功能概述——透明传输 4.数据链路层功能概述——差错检测 三、数据链路层重要协议 1.数据链路层重要协议&#xff1a;PPP协议 2.数据链路层重要协议&#x…

成功解决TypeError: can‘t multiply sequence by non-int of type ‘float‘

&#x1f525; 成功解决TypeError: can’t multiply sequence by non-int of type ‘float’ &#x1f4c5; 日期&#xff1a;2024年2月23日 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化…

MIT-BEVFusion系列九--CUDA-BEVFusion部署4 c++解析pytorch导出的tensor数据

目录 创建流打印 engine 信息打印结果内部流程 启动计时功能加载变换矩阵并更新数据&#xff08;重要&#xff09;内部实现 该系列文章与qwe一同创作&#xff0c;喜欢的话不妨点个赞。 在create_core方法结束后&#xff0c;我们的视角回到了main.cpp中。继续来看接下来的流程。…

蜂窝物联网咖WiFi认证解决方案

项目背景 随着目前网咖模式越来越流行&#xff0c;给网吧部署一套无缝漫游的WIFI网络势在必行。同时&#xff0c;网吧无线准入的验证码在客户机上面进行更新&#xff0c;以防周边的人员进行蹭网&#xff0c;损失网吧的外网带宽。 01 需求分析 1. 网吧服务区域全部覆盖无盲区…

harbor(docker仓库)仓库部署 - 高可用

harbor&#xff08;docker仓库&#xff09;仓库部署 - 高可用 1. harbor高可用1.1 方案说明1. 双主复制2. 多harbor实例共享后端存储 1.2 部署高可用&#xff08;多harbor实例共享后端存储&#xff09;1. 服务器划分2. 安装harbor&#xff08;先部署一套Harbor&#xff0c;用于…

Set集合(Java) 及底层原理

SET<E>是一个接口&#xff0c;添加的元素是无序的&#xff1a;添加数据的顺序和获取出的数据顺序不一致&#xff1b;不重复&#xff0c;无索引。 实现类&#xff1a; 1.HashSet&#xff1a;无序不重复无索引 2.LinkedHashSet&#xff1a;有序不重复无索引 3.TreeSet&…

聊天敏感词监控该怎样实现?

当员工在日常工作中&#xff0c;经常使用企业微信、钉钉等聊天通讯软件进行沟通和管理&#xff0c;不可避免地会出现员工和客户之间敏感行为的出现。 例如员工飞单、辱骂客户、私自承诺、收取红包等违规行为&#xff0c;这些不仅会影响公司形象&#xff0c;还会造成经济损失。…

企业级大数据安全架构(十一)Kerberos接入dophinscheduler

作者&#xff1a;楼高 建议将dophinscheduler集成到Ambari安装部署&#xff0c;在Ambari上面开启kerberos 1.安装准备 编译 从GitHub获取dolphinscheduler-1.3.9源码 git clone https://github.com/apache/dolphinscheduler.git -b 1.3.9-releasehttps://github.com/apache/…

从git上clone项目到本地后启动时的一种报错

当我们从git上拉项目到本地之后&#xff0c;先install,但启动时可能会出现报错&#xff0c;例如上面这种报错&#xff0c;这时候我们需要把package.json里的vite改一下&#xff0c;例如改成2.6.13&#xff0c;之后删掉node_modules,重新install,再启动一下&#xff0c;就好了。…

Oracle迁移到mysql-导出mysql所有索引和主键

导出建库表索引等&#xff1a; [rootlnpg ~]# mysqldump -ugistar -pxxx -h192.168.207.143 --no-data -d lndb > lndb20230223-1.sql 只导出索引&#xff1a;参考&#xff1a;MYSQL导出现有库中的索引脚本_mysql 导出数据库所有表的主键和索引-CSDN博客 -- MYSQL导出现有…

Redis(十五)Bitmap、Hyperloglog、GEO案例、布隆过滤器

文章目录 面试题常见统计类型聚合统计排序统计二值统计基数统计 Hyperloglog专有名词UV&#xff08;Unique Visitor&#xff09;独立访客PV&#xff08;Page View&#xff09;页面浏览量DAU&#xff08;Daily Active User&#xff09;日活跃用户量MAU&#xff08;Monthly Activ…