Javascript 将PDFJs Viewer.html转换为div

有人知道pdf.js（）中的viewer.html是否可以放在

中吗

---

或者更好的是，转换成AngularJs指令（我知道有几个pdfjs指令用于Angular，但没有一个具有viewer.html的质量）

您完全可以将viewer.html放在

中

从开始并包装

在您自己的

中，您可以根据自己的喜好进行样式设置：

<div id="myContainer">
    <div id="outerContainer">

      <div id="sidebarContainer"> 
      </div>  <!-- sidebarContainer -->

      <div id="mainContainer">
      </div> <!-- mainContainer -->

      <div id="overlayContainer" class="hidden">
      </div>  <!-- overlayContainer -->

    </div> <!-- outerContainer -->
</div>

---

请注意，使宽度小于约800px会挤压工具栏项。

将pdf文件的src放入iframe中，如下所示：

<div><iframe src="/pdfjs/viewer.html/{src of PDF file}" style="position: relative;   top: 0;  bottom: 0; left: 0;   width: 100%;   height: 700px;  border: 0"></iframe></div>

---

它可能会帮助您使用pdf.js提供的javascript api将pdf加载到div中。你也可以看到

//如果提供了来自远程服务器的绝对URL，请配置CORS
//该服务器上的头。
var url='//cdn.mozilla.net/pdfjs/helloworld.pdf'；
//通过标签加载，创建访问PDF.js导出的快捷方式。
var pdfjsLib=window['pdfjs-dist/build/pdf']；
//应规定工人的财产。
pdfjsLib.GlobalWorkerOptions.workerSrc='/mozilla.github.io/pdf.js/build/pdf.worker.js'；
//PDF的异步下载
var loadingTask=pdfjsLib.getDocument（url）；
loadingTask.promise.then（函数（pdf）{
console.log（'PDF-loaded'）；
//取第一页
var pageNumber=1；
getPage（页码）。然后（函数（第页）{
console.log（“页面加载”）；
var标度=1.5；
var viewport=page.getViewport（比例）；
//使用PDF页面维度准备画布
var canvas=document.getElementById（'the-canvas'）；
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
//将PDF页面呈现到画布上下文中
var renderContext={
背景：背景，
视口：视口
};
var renderTask=page.render（renderContext）；
renderTask.then（函数（）{
log（“呈现的页面”）；
});
});
}，功能（原因）{
//PDF加载错误
控制台错误（原因）；
});
#画布{
边框：1px纯黑；
}

PDF.js“你好，世界！”例子
正在将pdfjs查看器集成到angular指令中（但imho做得很差）。同时，您是否碰巧找到了任何替代方案？在您的回答中，指向源代码的链接从Node.js开始做了类似的事情，我在Node.js中将PDF文件包括在查看器的webpack&start浏览器中。还添加了重新排序和遍历客户端逻辑。谢谢兄弟！