vue或uniapp使用pdf.js预览

一、先下载稳定版的pdf.js,可以去官网下载  官网下载地址  或  pdf.js包下载(已配置好,无需修改)

二、下载好的pdf.js文件放在public下静态文件里, uniapp是放在 static下静态文件里

三、使用方式

   1. vue项目 注意路径 :src="`static/pdfjs-1.9/web/viewer.html?file=你的pdf路径
<iframe :src="`static/pdfjs-1.9/web/viewer.html?file=https://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf`" style="border:none;" width="1000" height="100%"></iframe>
 2. uniapp项目使用 注意路径  /static/PDFVIEW/pdfjs-1.9/web/viewer.html
<template><view style="width: 100vh;"><web-view :src="pdfUrl" :fullscreen="true"></web-view></view>
</template>
<script>
export default {data() {return {pdfUrl: '',htmlUrl: '/static/PDFVIEW/pdfjs-1.9/web/viewer.html', //新测试预览fileUrl:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',  }},onLoad(options) {this.pdfUrl = `${this.htmlUrl}?file=${this.fileUrl}`;}
}
</script>

四、控制台会出现跨域问题,这时候要注释跨域代码,

    在viewer.js文件找到这段代码,(在1861行)然后注释掉
 var fileOrigin = new URL(file, window.location.href).origin;if (fileOrigin !== viewerOrigin) {throw new Error('file origin does not match viewer\'s');}

五、这时候基本就能看了


pc端效果

手机端效果 

 

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

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

相关文章

每日一题 206反转链表

题目 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 3&#xff1a; …

块、行内块水平垂直居中

1.定位实现水平垂直居中 <div class"outer"><div class"test inner1">定位实现水平垂直居中</div></div><style>.outer {width: 300px;height: 300px;border: 1px solid gray;margin: 100px auto 0;position: relative;}.te…

途乐证券-新股行情持续火爆,哪些因素影响首日表现?

全面注册制以来&#xff0c;参加打新的投资者数量全体呈现下降。打新收益下降&#xff0c;破发频出的布景下&#xff0c;投资者打新策略从逢新必打逐步向优选个股改变。 经过很多历史数据&#xff0c;从商场定价、参加者热度以及机构重视度维度揭秘了上市后股价体现优秀的个股具…

Redis 之 缓存预热 缓存雪崩 缓存击穿 缓存穿透

目录 一、缓存预热 1.1 缓存预热是什么&#xff1f; 1.2 解决方案&#xff1a; 二、缓存雪崩 2.1 缓存雪崩是什么&#xff1f;怎么发生的&#xff1f; 2.2 怎么解决 三、缓存穿透 3.1 是什么&#xff1f;怎么产生的呢&#xff1f; 3.2 解决方案 3.2.1、采用回写增强&a…

SpringBoot基础之注册Servlet三大组件

文章目录 前言一、介绍二、注入Bean2.1.ServletRegistrationBean2.2.FilterRegistrationBean2.3.ServletListenerRegistrationBean 三.演示结果总结 前言 本文章将介绍SpringBoot注册Servlet的三大组件 一、介绍 由于SpringBoot默认是以jar包的方式运行嵌入式Servlet容器来启…

Protues如何安装下载使用:STM32利用Protues进行仿真

文章目录&#xff1a; 一&#xff1a;Proteus仿真的使用步骤 第一步&#xff1a;Proteus新建项目 第二步&#xff1a;Proteus设计电路图&#xff08;选取元器件、摆放元器件、编辑元器件属性、原理图布线&#xff09; 第三步&#xff1a;程序代码编写 第四步&#xff1a;…

如何在CSS中水平居中一个元素?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用 margin: 0 auto⭐ 使用 Flexbox 布局⭐ 使用绝对定位和负边距⭐ 使用表格布局⭐ 使用网格布局⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅…

VUE3组件

组件基础 {#components-basics} 组件允许我们将 UI 划分为独立的、可重用的部分&#xff0c;并且可以对每个部分进行单独的思考。在实际应用中&#xff0c;组件常常被组织成层层嵌套的树状结构&#xff1a; 这和我们嵌套 HTML 元素的方式类似&#xff0c;Vue 实现了自己的组件…

《使用 VMware 在 Windows 上搭建 Linux 系统的完整指南》

《使用 VMware 在 Windows 上搭建 Linux 系统的完整指南》 1、准备工作1.1 安装 VMware 软件1.2 下载 Linux 发行版镜像文件1.3 安装SSH工具 2、创建新的虚拟机2.1 VMware页面2.2 打开VMware页面并点击创建新的虚拟机&#xff0c;选择自定义2.3 选择系统兼容性&#xff0c;默认…

微信小程序读取本地json

首先在项目录下新建【server】文件夹&#xff0c;新建data.js文件&#xff0c;并定义好json数据格式。如下&#xff1a; pages/index/index.ts导入data.js并请求json pages/index/index.wxml页面展示数据

PHP实践:分布式场景下的Session共享解决方案实现

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…

[gdc]Rendering ‘God of War Ragnark‘

gdc23&#xff0c; sony santa monica关于god of war的分享&#xff1b; back ground 作者stephen mcauley现在是santa monica的technical director&#xff1b;20年加入santa monica&#xff0c;作为rendering lead&#xff0c;有9年的经验&#xff0c;之前在ubisoft montre…

虹科方案 | 成都大运会进行时,保障大型活动无线电安全需要…

成都大运会 7月28日&#xff0c;备受关注的第31届世界大学生夏季运动会在成都正式开幕。据悉&#xff0c;这是全球首个5G加持的智慧大运会&#xff0c;也是众多成熟信息技术的综合“应用场”。使用基于5G三千兆、云网、8K超高清视频等技术&#xff0c;在比赛现场搭建多路8K摄像…

STM32 LL库+STM32CubeMX--点亮板载LED

一、前期准备 硬件&#xff1a;STM32F103C8T6开发板调试工具&#xff1a;DAPLink(本次使用)或USB-TTL开发环境&#xff1a;STM32CubeMX、Keil、Vscode(可选)板载LED&#xff1a;PC13(低电平点亮) 二、STM32CubeMX配置 1.选择芯片型号&#xff1a; 2.配置外设时钟&#xff1a;…

Spring Cloud 智慧工地源码(PC端+移动端)项目平台、监管平台、大数据平台

智慧工地源码 智慧工地云平台源码 智慧建筑源码 “智慧工地”是利用物联网、人工智能、云计算、大数据、移动互联网等新一代信息技术&#xff0c;彻底改变传统建筑施工现场参建各方现场管理的交互方式、工作方式和管理模式&#xff0c;实现对人、机、料、法、环的全方位实时监…

开启MySQL的binlog日志

1.判断MySQL是否已经开启binlog SHOW VARIABLES LIKE log_bin; 查看MySQL的binlog模式 show global variables like "binlog%";几个关于binlog常用的命令 #查看日志开启状态 show variables like log_%; #查看所有binlog日志列表 show master logs; #查看最新一个b…

【Linux】DNS协议——应用层

目录 DNS协议 DNS背景 域名简介 域名解析过程 使用dig工具分析DNS过程 DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议&#xff0c;是一个用来将域名转化为IP地址的应用层协议。 DNS背景 TCP/IP中通过IP地址和端口号的方式&#xff0c;来确定网…

CAS服务端入门使用实践

CAS服务端入门使用实践 一、前言 1.简介 CAS 是一个企业多语言单点登录解决方案&#xff0c;支持大量附加身份验证协议和功能&#xff0c;满足身份验证和授权需求的综合平台。 2.环境 Windows 10JDK 1.8git version 2.41.0.windows.3Tomcat 9.0.78Maven 3.5.3cas-overlay-…

轻辙视觉引擎以多种AI算法工具,助力纺织行业断线检测智能识别

近年来&#xff0c;人工智能技术在各行各业的应用愈发广泛&#xff0c;机器视觉作为人工智能的重要分支&#xff0c;成为当下的研究热点。机器视觉技术的发展&#xff0c;大幅提升了工业、农业、医疗等领域的效率和精度。尤其在工业领域&#xff0c;随着智能制造的进一步发展&a…

stringstream常见用法

目录 构造函数 输出字符串 修改和清空字符串 利用 stringstream 去除字符串空格 利用stringstream去除指定的字符 stringstream 数据库 <sstream> 构造函数 创建一个对象&#xff0c;向对象输入字符串&#xff1a; string x"abcdefg";stringstream s…