vue项目解决打开新页面预览PDF，同时修改预览PDF页面的标题和图标

最新推荐文章于 2024-09-03 10:15:59 发布
最新推荐文章于 2024-09-03 10:15:59 发布
阅读量2.3k 收藏 5
点赞数 1
文章标签： vue.js html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57747266/article/details/120910190
版权

今天遇到一个需求，要就打开的pdf预览页面要，放自己的图标和标题。

问过大神后的知通过以下形式可以实现：

在public目录下新建一个html页面，

在新建的html页面的head中的

<title>自己想要的名字</title>

<link ref="icon" href="icon的路径">

然后通过嵌入iframe来引入：

<iframe src="./introduce.pdf"></iframe>

然后在代码中就可以通过<a>标签来跳转到该html。就可以啦

m0_57747266
关注
vue中预览pdf
蜗牛~~
07-18 1万+
如果后端返回的pdf地址，粘贴到浏览器的url框中，可以在浏览器中直接进行预览的，那么我们就用window.open，或 a标签，或iframe标签通过设置src进行预览即可。可以直接使用window.open（'获取到的pdf地址'）重新打开一个浏览器页签。通过浏览器页签直接实现预览功能（预览页面的样式，根据浏览器的不同，会略有差异），这种情况，上述方法解决不了，需要使用插件或者设置浏览器请求头的方式来解决。后端返回了服务器文件pdf的地址，粘贴到浏览器的url框中，单页pdf可以直接使用。
Vue点击跳转新窗口和修改窗口标题
weixin_49813550的博客
05-06 2435
Vue点击跳转新窗口和修改窗口标题 这是最近的一个需求，直接上代码。 一、跳转打开新窗口 二、修改新窗口的标题 1、首先在main.js中： 2、在跳转到那个页面里面的最大的div里面： 以上逻辑就可以实现跳转打开新窗口和修改新窗口的title 以下就是效果，我这里是动态的改变新窗口title ...
vue-----window.open打开新窗口文件并且修改窗口标题&&下载文件
heavenz19的博客
09-03 733
【代码】vue-----window.open打开新窗口文件并且修改窗口标题&&下载文件。
vue点击按钮预览图片，pdf，文件
LW0512的博客
11-19 3404
vue点击图片，pdf，文件，预览 <div style="width: 50%; display: inline-block; vertical-align: bottom"> <div class="tit-top">上传图片</div> <div style="min-height: 151px"> <div style="display:
ifram预览pdf，如何设置标题
My0920的博客
10-10 1882
现在显示的是base64被截取的一部分，要怎样修改或设置pdf的标题。
pdfjs预览 vue中常见的坑及修改预览的标题名
weixin_43368335的博客
03-19 2974
pdfjs下载地址：http://mozilla.github.io/pdf.js/getting_started/#download 解压后放在vue项目 public下面 使用： 1.文件流预览 import { Message} from "element-ui"; //filename等于文件名 data指代后端返回的文件流 不是文件地址 //该函数可以下载各种类型的文件 如果是pdf格式的 使用pdfjs进行打开新页面预览 export const downloa..
pdf.js 修改预览页面title
纸上得来终觉浅
10-26 1万+
前言 当使用异步请求去加载pdf文件时，预览页的title会变成请求的地址，即使修改response的返回信息也无法奏效。 经过调试后发现，viewer.js中默认使用的请求地址作为页面title，因此只需修改这块的代码即可。 修改方法 打开viewer.js 搜索 setTitleUsingUrl: function pdfViewSetTitleUsingUrl 定位到代码位置搜索 setT...
【Vue】vue2使用pdfjs预览pdf文件，在线预览方式一，pdfjs文件包打开新窗口预览pdf文件
qq_51055690的博客
09-12 9754
vue2项目，实现pdf文件的预览，只针对pdf类型，其他的不做考虑。提示：以下是本篇文章正文内容，下面案例可供参考打开方式就window.open拼路径就好了，我只针对pdf做了预览判断。
使用element-ui的upload组件实现上传图片和pdf可查看方法
08-20
在开发Web应用时，Element-UI是一个非常流行的前端UI库，尤其在Vue.js项目中，它提供了丰富的组件和样式，极大地提高了开发效率。本篇文章将详细介绍如何利用Element-UI的`upload`组件来实现图片和PDF文件的上传，并...
Vue开源项目库汇总
m0_68850571的博客
04-25 926
UI组件 element ★9305 - 饿了么出品的Vue2的web UI工具套件 Vux ★6802 - 基于Vue和WeUI的组件库 mint-ui ★4776 - Vue 2的移动UI元素 iview ★4458 - 基于 Vuejs 的开源 UI 组件库 Keen-UI ★2363 - 轻量级的基本UI组件合集 vue-material ★2207 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★1992 - 三端样式一致的响应式 UI 库 vu
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
10-15
Vue.js 是一款流行的前端框架，而 Element UI 是基于 Vue 的一套组件库，提供了丰富的 UI 组件，方便开发者快速构建界面。在开发过程中，有时我们需要实现多图片上传与回显的功能，尤其是在创建或编辑表单时，用户...
uniapp入门教程.pdf
04-19
- **App.vue**：项目的主组件文件，负责整个应用的路由管理和页面切换。 - **main.js**：项目入口文件，用于创建Vue实例并挂载到DOM节点上。 - **manifest.json**：项目配置文件，定义应用的基础信息，如应用名称、...
Vue 中 PDF 的预览
weixin_44692308的博客
07-26 873
本文将分享如何在 Vue 项目中实现 PDF 预览功能
vue officeapps怎么修改预览的文件名
young0309的博客
03-15 129
vue officeapps怎么修改预览的文件名
iframe打开pdf设置标题
weixin_41804506的博客
09-14 2306
iframe打开pdf设置标题
PDF文件标题修改方法
p_s_p的博客
11-15 5304
有些时候PDF文件打开后上面显示的标题和文件本身的名称不对应，我们可以直接重命名的方法修改文件的名称，但标题我们又没有办法直接修改，就需要利用第三方工具或者网站进行修改。
【前端】修改iframe里面的pdf的样式
smart_dream
04-15 1784
但每一个浏览器（Chrome，Edge，Firefox，Safari等）都使用自己的PDF引擎来显示嵌入的PDF文件。你可以使用JavaScript或jQuery来检测有灰色的元素并将其更改为白色，但你必须为市场上的每一个浏览器都这样做，这样太复杂了。通过使用iframe，你可以在一个网页中显示另一个网页的内容。然而，由于安全性和隐私方面的考虑，通过CSS样式直接修改iframe中的内容是不被允许的。但是，你可以使用CSS来修改iframe的外观，比如调整宽度、高度、边框颜色等。
vue项目中实现pdf文件预览功能
热门推荐
xm2by的博客
08-09 2万+
vue项目中实现pdf文件预览功能 最近遇到一个实现pdf文件预览功能的需求，分享一下实现方法： pdf预览相对word、excel、ppt等文件的预览比较容易，因为常见的浏览器都是支持pdf文件直接预览，所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览； 1、使用浏览器默认支持访问pdf文件的功能 1.1、当后端返回的是pdf文件在服务器上的路径时，直接...
vue使用onelyoffice预览pdf文件，并在新页面打开
最新发布
10-01
Vue.js可以结合OnlyOffice库来预览PDF文件并支持在新的浏览器标签页中打开。以下是简单的步骤： 1. 安装依赖：首先需要安装`@ONLYOFFICE/editor-api-sdk`，这是一套用于OnlyOffice在线编辑器的JavaScript SDK。你可以通过npm进行安装： ``` npm install @onlyoffice/editor-api-sdk ``` 2. 配置OnlyOffice API：你需要将OnlyOffice的SDK配置到你的项目中。通常是在创建文档实例时提供API key和URL： ```javascript import EditorApi from '@onlyoffice/editor-api-sdk'; const apiKey = 'your_api_key'; const apiUrl = 'https://your.onlyoffice.com/api'; const editor = new EditorApi(apiKey, apiUrl); ``` 3. 创建PDF预览功能：在模板中，你可以使用Element UI或者其他UI库创建一个按钮或链接，当用户点击时触发PDF预览： ```html <button @click="previewPdf(file)">预览PDF</button> ``` 4. 实现预览函数： ```javascript methods: { previewPdf(file) { editor.loadDoc(file.url) .then((doc) => { // 打开一个新的标签页 window.open(doc.getPreviewUrl(), '_blank'); }) .catch((error) => console.error('Error:', error)); } } ``` 这里假设`file`是一个包含PDF URL的对象。 5. **注意**：实际项目中，你可能需要处理跨域问题，如果PDF文件来自其他服务器，可能需要设置服务器允许跨域访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值