vue项目问题记录 pdf.js解决跨域问题 版本v2.16.105

最新推荐文章于 2024-06-15 13:50:25 发布
最新推荐文章于 2024-06-15 13:50:25 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： JavaScript 前端 VUE 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55195734/article/details/126951724
版权
JavaScript 同时被 3 个专栏收录
36 篇文章 0 订阅
订阅专栏
VUE
31 篇文章 0 订阅
订阅专栏
前端
29 篇文章 0 订阅
订阅专栏

pdfjs的使用

pdfjs官网下载pdfjs文件 并保存到vue
如果网站访问不到，这里放一个我正在使用的版本链接

下载后，将文件解压放到vue项目public文件夹中 目录展示：

在这里插入图片描述
保存后，来到需要用到pdfjs的vue组件中 使用iframe标签，调用展示public中的viewer.html，代码如下：
其中的src路径地址/pdfplugin/web/viewer.html?file= 是固定的，至于后边的fildata.pdfPath替换成你需要展示的pdf文件链接即可

<iframe
       :src="'/pdfplugin/web/viewer.html?file=' + fileData.pdfPath"
       style="width: 100%; height: 100vh"
   ></iframe>

解决跨域问题

来到刚放在public文件夹下的pdfjs插件文件夹
打开web下的viewer.js
在viewer.js中搜索file origin does not match viewer's"
将改判断语句隐藏掉，即可解决跨域问题！

效果展示

在这里插入图片描述

BiuBiu__A
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Python常用组件、命令大总结(持续更新)
LDC，公众号【轻松学编程】
03-12 1万+
Python后端开发常用组件、命令（干货） 持续更新中… 1、生成6位数字随机验证码 import random import string def num_code(length=6): """ 生成长度为length的数字随机验证码 :param length: 验证码长度 :return: 验证码 """ return ''.jo.....................
pdfjs-2.16.105-dist.zip
09-20
`pdfjs-2.16.105-dist.zip`是一个包含了PDF.js库最新稳定版本2.16.105的压缩包。 在`web`目录下，你会找到所有必要的资源，包括JavaScript库文件（如`pdf.js`和`pdf.worker.js`）、CSS样式表（如`viewer.css`）以及...
pdf.js实现web h5预览pdf文件（兼容低版本浏览器）
最新发布
HHH917的博客
06-15 626
以下为在uniapp vue3 实现 h5 预览pdf文件的代码 有使用vant（手指缩放功能只写了一点，是不能用的）。使用的是pdf.js 版本为 v2.16.105。因为新版本 兼容性不太好，部分手机预览不了，所以采用v2版本。
vue项目pdf文档的在线预览（注：意外服务器响应或pdf文件缺失损坏解决办法）
Schaffer的博客
08-04 4228
一、引入插件 npm安装：npm install --save pdfjs 方式一：只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除，如图： 方式二：将插件直接放在static文件夹下，如图： 二、前端页面代码 方式一和方式二：特点精简 <template> <div> <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></can
vue中PDF文件转图片方法
weixin_51882162的博客
10-19 7978
vue中pdf文件转化图片方法
在TinyMCE编辑器上传pdf，并且解析回显到编辑器中
s130_的博客
04-15 692
一开始，我是准备使用原生的iframe插入到编辑器中，后来经过测试，因为我的项目这个富文本的内容html最后是传到后端，让后端通过html解析生成pdf的,经过测试发现iframe标签不能被解析成pdf，所以我的大致思路是准备将pdf解析后，在我这边转成图片标签传给后端，最近客户提出，希望在使用的富文本编辑器中，增加一个上传pdf还要显示在编辑器中的一个需求，我网上找了下资料发现TinyMCE编辑器没有这个功能，好在这个TinyMCE支持自定义按键，所以准备写一个自定义按钮。
阿里前端面试题
u013060778的博客
10-15 1275
目录 HTML 面试知识点总结 5 1.1 DOCTYPE 的作用是什么？ 5 1.2 标准模式与兼容模式各有什么区别？ 5 1.3 HTML5 为什么只需要写 ，而不需要引入 DTD？ 5 1.4 SGML 、 HTML 、XML 和 XHTML 的区别？ 6 1.5 DTD 介绍 6 1.6 行内元素定义 6 1.7 块级元素定义 6 1.8 行内元素与块级元素的区别？ 6 1.9 HTML5 元素的分类 6 1.10 空元素定义 7 1.11 link 标签定义 7 1.12 页面导入样式时，使用
Java面试宝典Beta5.0
cillent_boy的专栏
02-15 4241
pdf下载地址：Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 1. 面向对象都有哪些特性以及你对这些特性的理解 21 2. 访问权限修饰符public、private、protected, 以及不写（默认）时的区别(2017-11-12) 22 3. 如何理解clone对象 22 二、JavaSE语法（2017-11-12-wl） ...
java工程师linux命令大全
weixin_42447342的博客
09-18 4042
原 java工程师linux命令， shell简介 1.1 shell家族 shell：命令解释器，根据输入的命令执行相应命令。 察看当前系统下有哪些shell： cat /etc/shells1 察看当前系统正在...
pdf.js，内含跨域解决办法
11-10
为了解决跨域问题，PDF.js 提供了几种解决方案： 1. 服务器端配置：在服务器端设置 CORS 头部，允许来自其他域的请求。例如，在 Apache 或 Nginx 配置中添加 `Access-Control-Allow-Origin` 头，指定允许访问的源...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue-socket.io跨域问题有效解决方法
10-15
总结，解决Vue-Socket.IO跨域问题的关键在于： 1. 开发阶段：通过Vue CLI的`devServer.proxy`配置进行代理。 2. 生产阶段：后端服务器正确配置CORS策略。 通过以上步骤，你应该能够成功解决Vue-Socket.IO在跨域...
Vue项目中跨域问题解决方案
01-19
使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET')...
js控制输入框自动获取焦点，并选中内容
BiuBiu_Ka
07-07 5303
js控制输入框自动获取焦点，并选中内容
antV-G2图标的label如何显示，如何自定义样式
BiuBiu_Ka
11-20 2886
chart .interval() .position("号位*平均分") //这里开始设置label .label("平均分", (val) => { return{ position: "middle", offset: 0, content: (originData) => { return val + "..
在vue项目中，使用videoPlayer插件，播放hls m3u8格式的视频流
BiuBiu_Ka
02-10 2202
安装videoPlayer yarn add vue-video-player -S 播放hls的话需要安装videojs-contrib-hls 并在组件内引入 yarn add videojs-contrib-hls <template> <div> <div class="videoBox"> <videoPlayer class="video-player vjs-custom-skin" ref="
Gojs学习笔记gojs常用api记录
BiuBiu_Ka
06-17 2076
实现此效果可看此文章传送门 gojs是javascript中一个非常强大交互式图形库 支持TS GoJS 为用户交互提供了许多高级功能，例如拖放、复制和粘贴、就地文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤消管理、调色板、概述、事件处理程序、命令和用于自定义操作的可扩展工具系统。 官网示例比较丰富，基本可满足日常需求！ 2. 在js中创建Diagram画布，指定相应的标签id 3. 定义节点样式 partContextMenu是需要我们对右键菜单进行的一些配置，下方会
vue中使用pdf.js的跨域问题
10-11
在使用 vue 中嵌入 pdf.js 时，可能会遇到跨域问题。解决方法是使用 webpack 的代理进行跨域配置。具体步骤如下： 1. 修改 config/index.js 文件中的 proxyTable 配置，加入以下代码： ``` proxyTable: { '/pdfjs': { target: 'http://example.com', // PDF.js 所在服务器地址 changeOrigin: true, pathRewrite: { '^/pdfjs': '/pdfjs' // 如果 PDF.js 的 URL 不包含 /pdfjs 前缀，则需要将此行修改为相应的前缀 } } } ``` 2. 在需要使用 pdf.js 的组件中，使用以下代码加载 PDF 文件： ``` <script> import pdfjsLib from 'pdfjs-dist/build/pdf'; export default { data() { return { pdfDoc: null, pageNum: 1 } }, methods: { loadPdf() { const loadingTask = pdfjsLib.getDocument('/pdfjs/example.pdf'); // 调用 PDF.js API 加载 PDF 文档 loadingTask.promise.then(pdf => { this.pdfDoc = pdf; }); } }, mounted() { this.loadPdf(); } } </script> ``` 这样就可以解决跨域问题，并加载 PDF 文件了。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值