【附源码】解决pdf.js跨域并从url动态加载pdf文档

这篇具有很好参考价值的文章主要介绍了【附源码】解决pdf.js跨域并从url动态加载pdf文档。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

0. Abstract

当我们想用PDF.js从URL加载文档时,将会因遇到跨域问题而中断,且是因为会触发了PDF.js和浏览器的双重CORS block,这篇文章将会介绍:①如何禁用pdf.js的跨域?②如何绕过浏览器的CORS加载URL文件?②如何使用PDF.js动态加载URL文件?

Keywords: PDF.js , CORS , URL , 动态加载 , demo , 源码。

1. Demo和源码

Demo和源码:https://demos.libertynlp.com/#/pdfjs-cors

源码是我已经完成所有设置的 PDF.js 代码,下载后导入你的项目中即可从 url 动态加载pdf。
【附源码】解决pdf.js跨域并从url动态加载pdf文档

2. 解决PDF.js跨域

要彻底解决 PDF.js 的跨域问题,让 PDF.js 可以从 url 加载文档,需要解决 PDF.js 本身和浏览器的双重跨域问题。

2.1 禁用PDF.js跨域

要禁用 PDF.js CORS,需要在 viewer.js 文档中将下面一段代码注释掉,让它失效。

// 原代码
      if (origin !== viewerOrigin && protocol !== "blob:") {
        throw new Error("file origin does not match viewer's");
      }

// 注释掉上方代码
      // if (origin !== viewerOrigin && protocol !== "blob:") {
      //   throw new Error("file origin does not match viewer's");
      // }
2.2 绕过浏览器跨域

要解决浏览器 URL 文件跨域的问题,可以通过后端服务器将PDF 文件转换成流文件的方式返回给 PDF.js,不过这里我们不讨论这样的策略,而是讨论如何只在前端解决这个问题。按照以下步骤可以解决问题。

  1. viewer.js 中注释掉以下三处代码
// inactivate follow original code in viewer.js

//first place
function webViewerLoad() {
	var config = getViewerConfiguration();
	window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
	window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
	var event = document.createEvent("CustomEvent");
	event.initCustomEvent("webviewerloaded", true, true, {});
	document.dispatchEvent(event);
	pdfjsWebApp.PDFViewerApplication.run(config);
}

//second place
if (document.readyState === "interactive" || document.readyState === "complete") {
	webViewerLoad();
} else {
	document.addEventListener("DOMContentLoaded", webViewerLoad, true);
}

//third place
run: function run(config) {
	this.initialize(config).then(webViewerInitialized);
},
  1. 重写 webViewerLoad 和 run 函数
// 重写 webViewerLoad 函数
window.webViewerLoad = function webViewerLoad(fileUrl) {
	var config = getViewerConfiguration();
	window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
	window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
	var event = document.createEvent('CustomEvent');
	event.initCustomEvent('webviewerloaded', true, true, {});
	document.dispatchEvent(event);

	if (fileUrl) {
		config.defaultUrl = fileUrl;
	}
	pdfjsWebApp.PDFViewerApplication.run(config);
}

//rewrite run function
//modeify for browser CORS
run: function run(config) {
	var _that = this;
	//add judgement
	if (config.defaultUrl) {
		_app_options.AppOptions.set('defaultUrl', config.defaultUrl)
	}

	_that.initialize(config).then(function() {
		webViewerInitialized()
	});
},
2.3 调用以上修改

viewer.html 中新增一个函数,目的是在加载页面时调用修改过的 webViewerLoad 函数。

< script type = "text/javascript" >
	window.onload = function() {
		var pdfUrl = "https://heritagesciencejournal.springeropen.com/track/pdf/10.1186/s40494-021-00620-2.pdf";
		webViewerLoad(pdfUrl);
	}
</script>

3. 从URL动态加载PDF

修改 viewer.html 中的函数,根据 viewer.html 所在 iframe 标签 src 中携带的 PDF url 加载文件。

<script type = "text/javascript" >
	window.onload = function() {
		var all_href = location.href;
		var file_id = all_href.split('?')[1];
		var pdfUrl = file_id.split('=')[1];
		// var pdfUrl='https://fireflycos.libertynlp.com/firefly-static/new_shouce.pdf';
		webViewerLoad(pdfUrl);
	}
</script>

当在项目中使用 iframe 引用 PDF.jsviewer.html 时,只需要修改 *src=”viewer.html?file=” *后面的 PDF Url地址就可以了。也就是改变 iframesrc 属性值就可以实现动态加载PDF文档。

//complete test.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body data-rsssl=1 data-rsssl=1>
		<iframe loading="lazy" id="pdf_container" src="viewer.html?file=https://fireflycos.libertynlp.com/firefly-static/new_shouce.pdf"
		frameborder="0" width="100%" height="800px"></iframe>
	</body>
</html>

4. 总结

想要 PDF.js 通过 URL 加载文件,需要修改以下几个地方。如果想看看效果或者直接使用我已经修改好的版本,可以到Demo和源码网址:https://demos.libertynlp.com/#/pdfjs-cors文章来源地址https://www.toymoban.com/news/detail-402914.html

1.在viewer.js中停用跨域判断代码
2.重构viewer.js中 webViewerLoader和run函数来解除浏览器的CORS限制
3.在iframe标签的src属性中增加file参数,实现PDF文件的动态加载

到了这里,关于【附源码】解决pdf.js跨域并从url动态加载pdf文档的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • PDF.js实现按需分片加载pdf文件

    1.服务端配置 分片加载的实现是基于 HTTP-RANGE,即服务端的文件接口必须实现了HTTP-RANGE。 服务端文件接口实现HTTP-RANGE,需要服务端添加如下响应头 2.下载 releases 包 在 mozilla/pdf.js 的github仓库下载最新的 Releases 包 https://github.com/mozilla/pdf.js/releases 这里以 Vue 为例,其他前端框架

    2024年01月17日
    浏览(46)
  • JS逆向实战案例1——某房地产url动态生成

    说明:仅供学习使用,请勿用于非法用途,若有侵权,请联系博主删除 作者:zhu6201976 url:aHR0cHM6Ly9uZXdob3VzZS4wNTU3ZmRjLmNvbQ== 该站点项目url通过点击JS生成,project_id与生成后的结果完全不同,且通过生成后的结果进行访问、有时效性。例如:project_id=3362,生成结果:0984-18052-92

    2024年02月01日
    浏览(48)
  • pdf格式文件下载不预览,云存储的跨域解决

    后端接口中返回的是pdf文件路径比如: pdf文件路径 (https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf) 前端适配是这样的 点击后预览 但是客户方要求不预览点击后直接下载 示例演示  (pdf下载 - 码上掘金) 有pdf链接的可以跨过该阶段 登陆阿里云平台 1. 点击又上角的控

    2024年02月11日
    浏览(37)
  • 动态加载 JS 文件

    动态加载JS文件是指在网页运行过程中通过JavaScript代码向页面中动态添加外部JS文件,这种方式能够提高页面加载速度和用户体验,并且可以帮助网站实现更多的功能和特效。 本文将详细介绍动态加载JS文件的基本原理、优势、注意事项以及具体实现方法,希望能够对开发者

    2024年02月13日
    浏览(32)
  • js实用方法记录-js动态加载css、js脚本文件

    附送一个加载iframe,h5打开app代码 方法调用: dynamicLoadJs(\\\'http://www.yimo.link/static/js/main.min.js\\\',function(){alert(\\\'加载成功\\\')}); 方法调用:  dynamicLoadCss(\\\'http://www.yimo.link/static/css/style.css\\\') 参考:动态加载js和css - 猿客 - 博客园 方法调用: dynamicLoadIframe(\\\'http://www.yimo.link\\\',function(){alert(\\\'加载

    2024年02月13日
    浏览(40)
  • js跨域的解决方案

    指的是浏览器不能执行其他网站的脚本,简单来说是浏览器同源政策的限制,浏览器针对于ajax的限制。 同源政策 两个页面拥有相同的 协议,端口,域名 就是同源,如果有一个不相同就是不同源。 同源政策产生的目的 保护用户信息安全,防止一些网站盗取用户信息。 常见

    2024年02月10日
    浏览(128)
  • js跨域问题及解决方法汇总

    浏览器为了保证用户信息的安全,防止恶意网站窃取数据,禁止不同域之间的js交互。对于浏览器而言,只要协议、域名、端口其中有一个不同就会触发同源策略,造成跨域,从而限制交互 cookie、storage、indexDB等不能获取 ajax不能发送请求、dom树无法获得 如果一个网页可以随

    2024年02月10日
    浏览(35)
  • 微信小程序实现PDF预览功能——pdf.js(含源码解析)

    前言 前一段时间遇到了一个需求,关于 pdf 文件的预览,客户要求如下: 只能在微信小程序内预览,不能调起本地浏览器预览; 需要让用户强制阅读 10s 后才算阅读完成,进而进行下一步操作; 用户不能下载预览的 pdf 文件; 因为一些原因(此处省略一万字🐎),这个项目

    2023年04月09日
    浏览(41)
  • js解决url传递中文参数乱码问题

    做后台管理系统的时候,出现了一个bug:点击“导出数据”按钮,打开文件里面是空的。 乱码的url 正确的url 1.文件为空,应该是请求的url路径不对,显示一个空的模板即没带参数,因此可以判断是参数有误; 2.控制台打出url,可以看出是参数中文乱码; 3.怎样解决中文乱码问题

    2023年04月19日
    浏览(41)
  • 【CSS加载动画特效】28种纯CSS实现的加载loading动态特效(附源码)

    今天其实还是有点期待6月份城市赛道的成绩公布,但是可能因为出现城市太多等问题,官方也还在快马加鞭的统计中,我也趁机再发一篇前端的文章了,其实在很多系统里面我们都看到过各种各样的加载中样式,但是总有些显得平平无奇,今天我就统计了28种load加载动画特效

    2024年02月15日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包