pdfjs 到 img/canvas,仅适用于 FireFox
pdfjs to img/canvas, only works in FireFox
我使用 pdf.js 库从客户端的 PDF 页面制作 image/canvas。但它只适用于 FireFox,不适用于 Chrome 或 IE10+。我环顾四周,但找不到好的答案或解决方案。
我读到 pdf.js 在 IE 上或 Chrome 需要一个网络服务器但是当我在 JSFiddle 上尝试代码时它仍然不起作用。
这里有一个例子:https://jsfiddle.net/aqxwsfjo/2/
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/master/examples/helloworld/helloworld.pdf';
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({canvasContext: context, viewport: viewport})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compatibility.js"></script>
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
似乎 GitHub 在使用 Content-Type: text/plain
返回原始文件时添加了 header X-Content-Type-Options: nosniff
。参见相关问题:Link and execute external JavaScript file hosted on GitHub
如相关问题解决方案中所述,将 https://raw.githubusercontent.com
替换为 https://rawgit.com/
,其中 returns 具有正确内容类型的文件。
此处更新fiddle:https://jsfiddle.net/aqxwsfjo/4/
我使用 pdf.js 库从客户端的 PDF 页面制作 image/canvas。但它只适用于 FireFox,不适用于 Chrome 或 IE10+。我环顾四周,但找不到好的答案或解决方案。
我读到 pdf.js 在 IE 上或 Chrome 需要一个网络服务器但是当我在 JSFiddle 上尝试代码时它仍然不起作用。
这里有一个例子:https://jsfiddle.net/aqxwsfjo/2/
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/master/examples/helloworld/helloworld.pdf';
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({canvasContext: context, viewport: viewport})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compatibility.js"></script>
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
似乎 GitHub 在使用 Content-Type: text/plain
返回原始文件时添加了 header X-Content-Type-Options: nosniff
。参见相关问题:Link and execute external JavaScript file hosted on GitHub
如相关问题解决方案中所述,将 https://raw.githubusercontent.com
替换为 https://rawgit.com/
,其中 returns 具有正确内容类型的文件。
此处更新fiddle:https://jsfiddle.net/aqxwsfjo/4/