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

最新推荐文章于 2024-04-25 15:54:29 发布
最新推荐文章于 2024-04-25 15:54:29 发布
阅读量2.1k 收藏 4
点赞数 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
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目中实现pdf文件预览功能
xm2by的博客
08-09 2万+
vue项目中实现pdf文件预览功能 最近遇到一个实现pdf文件预览功能的需求，分享一下实现方法： pdf预览相对word、excel、ppt等文件的预览比较容易，因为常见的浏览器都是支持pdf文件直接预览，所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览； 1、使用浏览器默认支持访问pdf文件的功能 1.1、当后端返回的是pdf文件在服务器上的路径时，直接...
如何通过vue3和vite实现在线预览pdf功能，供大家学习研究参考
11-16
pdfjsLib.GlobalWorkerOptions.workerSrc = "./pdf.worker.js"; const loadingTask = pdfjsLib.getDocument(state.source); loadingTask.promise.then((pdf) => { state.numPages = pdf.numPages; }); }); ...
Vue+ElementUI使用vue-pdf实现预览功能
10-15
主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
iframe打开pdf设置标题
weixin_41804506的博客
09-14 1983
iframe打开pdf设置标题
vue 跳转页面打开浏览器新窗口或者打开新标签
最新发布
Z18834071903的博客
04-25 1191
vue 跳转页面打开浏览器新窗口或者打开新标签
pdf文件预览 浏览器窗口名修改
qq_36636312的博客
01-12 4281
pdf文件【后端修改】 1，效果图 2，后端代码 public static void renamePdfTitle(File file, String fileName, HttpServletResponse response) { if (file != null && file.exists()) { try (OutputStream outputStream = response.getOutputStream();
ifram预览pdf，如何设置标题
My0920的博客
10-10 1008
现在显示的是base64被截取的一部分，要怎样修改或设置pdf的标题。
pdfjs预览 vue中常见的坑及修改预览的标题名
weixin_43368335的博客
03-19 2815
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 officeapps怎么修改预览的文件名
young0309的博客
03-15 101
vue officeapps怎么修改预览的文件名
在VUE项目中使用pdf.js+iframe实现pdf文件预览
K1nney的博客
07-12 1647
*
更改单文档应用程序主框架Frame的标题
tianmo2010的专栏
03-28 3059
方法一： BOOL CMainFrame::PreCreateWindow(CREATESTRUCT& cs)    //重写这个类 { // TODO: Modify the Window class or styles here by modifying // the CREATESTRUCT cs cs.style   &=   ~FWS_ADDTOTITLE;
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现pdf文档在线预览功能
10-15
在Vue项目中实现PDF文档在线预览功能，主要依赖于`pdf.js`插件，它是一个JavaScript库，能够解析PDF文件并将其渲染到HTML5的Canvas...同时，对于Android系统不支持原生PDF预览的问题，`pdf.js`提供了很好的解决方案。
vue-pdf预览pdf文件流示例
12-26
通过这种方式，vue-pdf库可以帮助我们在Vue项目中轻松预览PDF文件流，提供了良好的用户体验，且无需将文件下载到本地。同时，它还支持多种定制选项，如缩放、书签和链接等，可以满足各种复杂的需求。
vue 修改浏览器标签名的办法
qq_37916164的博客
06-21 3343
方法1：首先配置vue.config.js文件
vue项目中动态修改浏览器页签名称
qq_41238459的博客
12-18 821
vue2.0版本如何动态修改浏览器页签名称、vue项目中解决重复点击同一路由时报错问题
vue在线预览pdf-- “iframe“ 标签或者window.open()
qq_39877681的博客
06-16 3346
vue在线预览pdf;“iframe” 标签；window.open()
html设置pdf预览名字,浏览器预览PDF文件的个性化设置
weixin_42321075的博客
06-16 2661
现在市面上主流的浏览器如：Chrome、火狐等都内置了PDF文件预览插件，Chrome 使用 Chrome PDF Viewer，火狐使用 pdf.js，IE 会使用本地的 Adobe Reader 插件 。在 Html 页面中，可以通过 iframe 嵌入pdf文件。如果想控制 pdf 在打开时显示具体页码的内容，想让 pdf 按照屏幕自动缩放大小时应该如果做呢？庆幸的是虽然各大浏览器厂商都用自...
pdf预览vue页面
04-18
PDF预览是指在Vue页面中展示PDF文件的功能。通常情况下，我们可以使用第三方库来实现这一功能，比如PDF.js。 PDF.js是一个由Mozilla开发的开源JavaScript库，用于在Web浏览器中渲染PDF文档。它提供了一套API，可以在Vue项目中轻松地集成和使用。 以下是在Vue页面中实现PDF预览的步骤： 1. 安装依赖：首先，在Vue项目中安装PDF.js的依赖。可以使用npm或者yarn进行安装，命令如下： ``` npm install pdfjs-dist ``` 2. 创建PDF预览组件：在Vue项目中创建一个组件，用于展示PDF文件。可以命名为`PdfViewer.vue`。 3. 导入PDF.js：在`PdfViewer.vue`组件中，导入PDF.js的相关模块。可以使用以下代码： ```javascript import pdfjsLib from 'pdfjs-dist' ``` 4. 加载PDF文件：在`mounted`钩子函数中，使用PDF.js加载PDF文件，并将其渲染到页面上。可以使用以下代码： ```javascript mounted() { const url = 'path/to/your/pdf/file.pdf'; const loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then((pdf) => { // 获取第一页 pdf.getPage(1).then((page) => { const canvas = this.$refs.canvas; const context = canvas.getContext('2d'); const viewport = page.getViewport({ scale: 1 }); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); } ``` 5. 在模板中展示PDF：在`PdfViewer.vue`组件的模板中，添加一个`canvas`元素，用于展示PDF页面。可以使用以下代码： ```html <template> <div> <canvas ref="canvas"></canvas> </div> </template> ``` 这样，你就可以在Vue页面中实现PDF预览功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值