今天,上线一个客户网站之后(使用的是广州新一代虚拟空间)发现在读取上传的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读取并输出文件执行时间比较长

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

  1. 使用pdf.js预览实现读取服务器外部文件

    不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的 接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件 ...

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

    我是在IE11和谷歌上做的测试,都可以显示,把做出的东西记录下来,方便大家还有自己学习! 可以在IIS7服务器上也可以下载Tomcat来做服务器 Tomcat下载地址   http://pan.bai ...

  3. vue -- config.js 配置跨域文件

    1.在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的. 2.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev -- ...

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

    最近在码一个小项目,需要远程读取json.因为需求很少,如果引用jquery使用其getjson方法就显得很浪费嘛= = 这篇文章很详细的解释了JSON跨域读取的前世今生,把原理讲得很透彻.特此分享. ...

  5. js调用跨域

    web aapi 初体验 解决js调用跨域问题   跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 不同IP不同 ...

  6. js&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:/ ...

  7. 关于跨域读取json数据我的理解

    这两天在做关于读取json数据的插件,想用getJSON读取数据: $.getJSON(http://www.xxxx.com/Titles.js, function (data) { console ...

  8. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

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

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

随机推荐

  1. C++ 基础 引用

    1.引用的本质 int b = 10; int &a = b; 等效于: int * const a = &b; 由于 a 是 const声明,所以一旦定义无法修改,所以要在定义时就要 ...

  2. python——字符串的操作判断

    s为字符串 s.isalnum()  所有字符都是数字或者字母,为真返回 Ture,否则返回 False. s.isalpha()   所有字符都是字母,为真返回 Ture,否则返回 False. s ...

  3. 009---Django的模型层(1)

    ORM 全称:对象--关系--映射 数据表----类 数据行----对象 字 段----属性优势:专注于后端逻辑,不用写复杂的sql语句劣势:会忘掉sql,牺牲了效率 Django连接mysql数据库 ...

  4. 4,远程连接Linux

    为什么要远程连接Linux 在实际的工作场景中,虚拟机界面或者物理服务器本地的终端都是很少接触的,因为服务器装完系统之后,都要拉倒IDC机房托管,如果是购买的云主机,那更碰不到服务器本体了,只能通过远 ...

  5. python-openpyxl操作excel

    python 读写 excel有很多选择,但是,方便操作的库不多,在我尝试了几个库之后,我觉得两个比较方便的库是xlrd/xlwt.openpyxl. 之所以推荐这两个库是因为这两个库分别操作的是不同 ...

  6. Entity FrameWork和Dapper的使用

    EF是微软系列下的更正苗红的重量级的ORM框架,功能强大,操作数据库的时候几乎不用写sql,可以像写C#代码一样操作数据库,尤其支持多表关联操作的时候极为方便,但是生成的sql语句性能很差,实在不敢恭 ...

  7. zedboard烧写SD卡启动linux镜像

    1. 先把SD卡格式化,然后把镜像文件拷贝到SD卡,下面应该是没有文件系统的 2. 插上SD卡,Zedboard设置启动模式,有5个跳线帽,配置如下,上电启动 3. 看下串口的输出

  8. str_replace字符串替换

    字符串替换, src 源字符串, buf_size 缓冲大小, search搜索的字符串大小, repstr 需要替换成的字符串 int str_replace(char *src, unsigned ...

  9. 关于IOS下日期格式分隔符 - 、 /的问题

    之前我们项目有一个低价日历,服务端下发的时间格式为: "2014-07-21 09:45:12"  然后一直出不了数据,后来发现. IOS下无论chrome.safari还是Uc如 ...

  10. java中继承的概念

    继承是类的三大特性之一,是java中实现代码重用的重要手段之一.       java中只支持单继承,即每个类只能有一个父类.       继承表达的是is a的关系,或者说一种特殊和一般的关系.   ...