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('','标题')。

结束。。

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

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

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

相关文章

【QT-lineEidte动画效果

QT-lineEidte动画效果 一、演示效果二、核心代码三、下载链接 一、演示效果 二、核心代码 #ifndef DynamicUnderlineLineEdit_H #define DynamicUnderlineLineEdit_H#include <QWidget> #include <QLineEdit> #include <QPainter> #include <QPaintEvent…

HTML5新婚、年会、各种聚会的现场抽奖活动(附源码)

文章目录 1.抽奖平台设计来源1.1 主界面效果1.2 抽奖效果1.3 中奖效果 2.效果和源码配置2.1 动态效果2.2 人员信息配置2.3 奖品信息配置2.4 抽奖音效配置2.5 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/deta…

最长公共前缀【简单】

题目 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""。 示例如下&#xff1a; 所给提示如下&#xff1a; 1 < strs.length < 2000 < strs[i].length < 200strs[i] 仅由小写英文字母组成 解题 根据…

使用 C++23 协程实现第一个 co_await 同步风格调用接口--Qt计算文件哈希值

C加入了协程 coroutine的特性&#xff0c;一直没有动手实现过。看了网上很多文章&#xff0c;已经了解了协程作为“可被中断和恢复的函数”的一系列特点。在学习过程中&#xff0c;我发现大多数网上的例子&#xff0c;要不就是在main()函数的控制台程序里演示yeild,await, resu…

【动态规划专栏】背包问题:01背包

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…

个人博客系列-前端部署-创建框架(4)

项目环境介绍 Vue3 Vite TypeScript 服务器&#xff1a;阿里云contos node版本&#xff1a;v18.18.2 npm版本&#xff1a;v10.2.4 执行下面一行命令&#xff0c;创建vue3框架 npm create vuelatest修改端口&#xff1a;9528&#xff0c; 此步骤可以忽略&#xff08;使用默…

Chrome Captcha自动解决器,如何下载CapSolver

在数字时代&#xff0c;CAPTCHA&#xff08;Completely Automated Public Turing tests to tell Computers and Humans Apart&#xff0c;完全自动区分计算机和人类的公共图灵测试&#xff09;作为一项重要的安全措施&#xff0c;用于保护网站免受自动机器人的攻击。然而&#…

一款跳转警告HTML单页模板源码

一款跳转警告HTML单页模板,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 代码如下 <!DOCTYPE html> <html> <!--QQ沐编程 www.q…

5个精美的wordpress中文企业主题模板

元宇宙WordPress主题模板 简洁大气的元宇宙 Metaverse WordPress主题模板&#xff0c;适合元宇宙行业的企业官网使用。 https://www.jianzhanpress.com/?p3292 职业技术培训WordPress主题模板 简洁大气的职业技术培训WordPress主题&#xff0c;适合用于搭建教育培训公司官方…

【SpringCloudAlibaba系列--OpenFeign组件】OpenFeign的配置、使用与测试以及OpenFeign的负载均衡

步骤一 准备两个服务&#xff0c;provider和consumer 本文使用kotlin语言 provider是服务的提供者&#xff0c;由provider连接数据库 RestController RequiredArgsConstructor RequestMapping("/provider/depart") class DepartController(private val departServ…

磨砂玻璃(毛玻璃)风格的登录页,怎么就流行起来了呢?

拟物风格之后是扁平风格&#xff0c;扁平风格之后是拟态风格&#xff0c;而毛玻璃风格是拟态风格的一种表现形式&#xff0c;如今非常流行了&#xff0c;背后的原因是什么&#xff1f;贝格前端工场为大家详细分析下。 UI风格先后经历了拟物、扁平和拟态三大类&#xff0c;分别…

掼蛋之还贡技巧

掼蛋游戏的规则之一就是进贡和还贡以及抗贡&#xff0c;只要末游没能抗贡&#xff0c;那么就必须把最大的那张牌贡给头游&#xff0c;头游也要选一张牌还给末游。那么我们该如何还贡呢&#xff1f; 一、忌单张 尽量不要还自己的单张&#xff0c;因为自己的数量少&#xff0c;有…

RabbitMQ开启MQTT协议支持

1&#xff09;RabbitMQ启用MQTT插件 rootmq:/# rabbitmq-plugins enable rabbitmq_mqtt Enabling plugins on node rabbitmq: rabbitmq_mqtt The following plugins have been configured:rabbitmq_managementrabbitmq_management_agentrabbitmq_mqttrabbitmq_web_dispatch Ap…

从入门到精通:Spring Boot Alibaba学习网站助你构建高效微服务

介绍&#xff1a;Spring Boot Alibaba是一个基于Spring Boot的微服务开发框架&#xff0c;由阿里巴巴开源&#xff0c;旨在为分布式应用开发提供一站式解决方案。 Spring Boot Alibaba集成了阿里巴巴的微服务实践经验和组件&#xff0c;它是在Spring Cloud项目中孵化的&#xf…

解决Jenkins-2.396启动报错:Failed to start Jenkins Continuous Integration Server.

场景&#xff1a;现有环境已经使用Java 8在运行业务&#xff0c;安装Jenkins后启动报错。 原因&#xff1a;因为Jenkins-2.396 依赖于Java 11 版本才能启动。 解决方法&#xff1a; yum 安装Java11 yum install java-11-openjdk-devel java-11-openjdk 或者二进制安装java11修…

基于生成扩散模型的分子对接程序-DiffDock安装及使用

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 文章目录 前言一、DiffDock是什么&#xff1f;二、DiffDock安装步骤1. 下载2.创建conda环境并安装STEP 1. 创建conda环境并配置STEP 2. 配置ESM和OpenFoldSTEP 3. 检查cuda和pytorch geometric安装STEP 4. 检查p…

【RHCE】SHELL for循环练习

目录 1.编写脚本for1.sh,使用for循环创建20账户&#xff0c;账户名前缀由用户从键盘输入&#xff0c;账户初始密码由用户输入&#xff0c;例如:test1、test2、test3、……、test10 2.编写脚本for2.sh,使用for循环,通过ping命令测试网段的主机连通性&#xff0c;IP前3段由用户…

江科大stm32学习笔记——【3-2】GPIO输出:LED闪烁LED流水灯蜂鸣器

&#xff08;一&#xff09; 硬件连接 1.LED闪烁 LED灯正极连接面包板电源正极&#xff0c;LED负极连接单片机A0口 (也可以LED负极连面包板负极&#xff0c;LED正极连接单片机A0口) 跳线连接单片机3.3和面包板正极&#xff0c;连接单片机GND和面包板负极 2.LED流水灯 3.蜂鸣…

在UE5中制作UI环形进度条

在日常开发中&#xff0c;经常会有环形进度条UI的效果&#xff0c;例如技能CD时间、加载动画等&#xff0c;本文将通过材质球节点实现该效果&#xff0c;相较于准备美术素材&#xff0c;这样的做法更为方便&#xff0c;效果如下&#xff1a; 1.制作环状效果材质函数 在内容面…

【云动世纪:Apache Doris 技术之光】

本文节选自《基础软件之路&#xff1a;企业级实践及开源之路》一书&#xff0c;该书集结了中国几乎所有主流基础软件企业的实践案例&#xff0c;由 28 位知名专家共同编写&#xff0c;系统剖析了基础软件发展趋势、四大基础软件&#xff08;数据库、操作系统、编程语言与中间件…