pdf.js如何跨域读取pdf文件?

今天,上线一个客户网站之后(使用的是广州新一代虚拟空间)发现在读取上传的pdf文件的时候读取错误,通过直接在浏览器输入文件地址的时候发现文件地址被重定向了(呵呵!),结果就是pdf文件源由本地直接变成了跨域获取。解决问题吧!

1、pdf.js获取文件的方法

You can modify the defaultUrl app option in the web/app_options.js file or you can append the ?file= query string to the viewer URL, e.g. http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf. In the latter case, the PDF path/URL must be encoded using encodeURIComponent().

The viewer can be started without any PDF loaded by setting the defaultUrl app option to an empty string or by using the ?file= query string without any location specified. Use PDFViewerApplication.open(file) to load the PDF file later.

You can use raw binary data to open a PDF document: use Uint8Array instead of URL in the PDFViewerApplication.open call. If you have base64 encoded data, please decode it first -- not all browsers have atob or data URI scheme support. (The base64 conversion operation uses more memory, so we recommend delivering raw PDF data as typed array in first place.)

以上是从其github项目上摘下的大概是有三种方式

  • 设置defaultUrl
  • 通过路径后面带file参数   比如:http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf
  • 使用PDFViewerApplication.open打开Uint8Array获取的文件流形式

前面两种方法只能获取同源文件,第三种方法就是我需要的跨域获取文件方法了。

2、通过后台(php)获取文件并且将其转换成文件流返回给前端

<?php//直接使用file_get_contents获取再输出就行$file = file_get_contents($url);
echo $file;?>

3、pdf.js通过ajax同步请求获取文件流

var PDFData = "";
var getUrl = "";
var baseUrl = "http://www.zdxhxfzxwx.com.img26752.200cdn.com:9898";
getUrl = baseUrl + getQueryString("filePath");
$.ajax({
    type:"post",
    async:false,  //
    contentType: "application/x-www-form-urlencoded",
    mimeType: ‘text/plain; charset=x-user-defined‘,
    url:"/plus/getFileToBinary.php",
    success:function(data){
       PDFData = data;
    },
    data: {
      "url": getUrl,
    }
});
var rawLength = PDFData.length;
console.log(rawLength);
//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(i = 0; i < rawLength; i++) {
  array[i] = PDFData.charCodeAt(i) & 0xff;
}
DEFAULT_URL = array;
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}  

这个方法有问题:1、php服务器要支持文件读取(可以通过修改php配置文件前提是有这个修改权限)

        2、php读取并输出文件执行时间比较长

原文地址:https://www.cnblogs.com/linxingyun/p/9293455.html

时间: 2024-08-03 01:46:51

pdf.js如何跨域读取pdf文件?的相关文章

Js 跨域上传文件

代码在github上( https://github.com/andygithubchen/jsUpload ),请结合github上的文件阅读. 主要实现js跨域上传文件,这里的跨域目前只在两个域名所指向的服务器在同一局域网内. 当然,这两种方案都可以做同域名上传. 例如: 192.168.1.60 www.test.cn 192.168.1.61 www.video.cn 如果要在www.test.com域名下上传文件到www.video.com域名下,可以使用下面这两个方案: 方案一(在s

利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能)

我是在IE11和谷歌上做的测试,都可以显示,把做出的东西记录下来,方便大家还有自己学习! 可以在IIS7服务器上也可以下载Tomcat来做服务器 Tomcat下载地址   http://pan.baidu.com/s/1dEEUFQD 根据百度经验安装和配置Tomcat   http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html 有关pdf.js的介绍在如下网址   https://github.com/mozilla/pdf

JSON跨域读取那点事(JSONP跨域访问)

最近在码一个小项目,需要远程读取json.因为需求很少,如果引用jquery使用其getjson方法就显得很浪费嘛= = 这篇文章很详细的解释了JSON跨域读取的前世今生,把原理讲得很透彻.特此分享. 原文链接:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强

将微博或者qq空间的说说同步至博客园 wcf+js(ajax)跨域请求(1)

前天刚写了篇文章使用Bootstrap为你的博客园自定义轮播图片(今天将图片加载的顺序调整了下,不在访问的时候直接加载,而是页面加载最后在脚本里面动态添加dom元素),虽说技术含量不怎么高,但是大家还算感兴趣.其实对博主来说最关键是博客的积分在涨.所以趁热打铁,再来一篇使用wcf+js ajax跨域请求数据同步空间说说的帖子. 因为是请求qq说说的数据,所以要登陆我的qq,这个很麻烦,总不能让每个访客都登陆的qq,然后把数据取出来吧,而且qq也没有相关的接口提供,登陆的时候还要处理验证码.所以这

js调用跨域

web aapi 初体验 解决js调用跨域问题 跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 不同IP不同端口: http://172.28.20.100:8001/api/user    http://172.128.20.100:8002/api/user 基本介绍 web api出现的时间也不短了,一直没机会运用,很多公司还是用的wcf 和webservice.目前常用的web api场景是一个接口多

js&amp;jquery跨域详解jsonp,jquery并发大量请求丢失回调bug

URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.js 同一域名,不

js 利用iframe和location.hash跨域解决办法,java图片上传回调JS函数跨域

奶奶的:折腾了我二天,终于解决了!网上有很多例子. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 测试通过 js :这个主页面,部分代码, function submitUpload(id){ $("#imgSrc" + id +"").attr("alt", "图片上传中--"); var imgID = id; if(id>0){ imgID = 1; } var for

js ajax跨域被阻止 CORS 头缺少 &#39;Access-Control-Allow-Origin&#39;(转)

今天ajax请求域名的时候出现 已阻止跨源请求:同源策略禁止读取位于 http://www.zuimeimami.com*****的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin'). 解决办法1: var url='http://localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?'; $.ajax({ url:url, dataType:'

springcloud 项目源码 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离

1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2.多数据源:(支持同时连接无数个数据库,可以不同的模块连接不同数的据库)支持N个数据源3.阿里数据库连接池druid,安全权限框架 shiro(菜单权限和按钮权限), 缓存框架 ehcache4.代码编辑器,在线模版编辑,仿开发工具编辑器5.调用摄像头拍照 自定义裁剪编辑头像,头像图片色度调节6.we