【问题标题】:How to embed an external pdf in a bootstrap modal dialog?如何在引导模式对话框中嵌入外部 pdf?
【发布时间】:2016-01-30 15:55:21
【问题描述】:

我有一个外部 pdf,我想在我的页面中显示它。以下工作正常:

<object frame-resize data="www.cbu.edu.zm/downloads/pdf-sample.pdf" type="application/pdf" width="200px" height="200px"></object>

问题:我想在modal 窗口中显示这个嵌入的 pdf。但是一旦我把它移到那里,pdf就不再正确显示了:

<a data-toggle="modal" data-target=".my-modal"></div>

            <div class="modal fade my-modal" tabindex="-1" role="dialog">
              <div class="modal-dialog" role="document">
                <div class="modal-content">

                  <div class="modal-body">
                    <object frame-resize data="www.cbu.edu.zm/downloads/pdf-sample.pdf" type="application/pdf" width="200px" height="200px"></object>
                  </div>

                </div>
              </div>
            </div>

结果:我收到以下错误:

offsetParent is not set -- cannot scroll viewer.js:150:5
scrollIntoView() viewer.js:150
PDFViewer_scrollPageIntoView() viewer.js:4880
pagechange() viewer.js:7394
PDFViewer.prototype.currentPageNumber() viewer.js:4558
pdfViewSetInitialView() viewer.js:6697
resolved()
PDF 0bf9e083c3a94f2cd2e1740080c8c88c [1.4 Acrobat Distiller 7.0.5 (Windows) / Adobe Acrobat 7.0] (PDF.js: 1.1.215)
TypeError: canvas._viewport is undefined
NotFoundError: Node was not found

如何将其嵌入到模式对话框中?

有趣的是,当我关闭模态对话框并再次打开它时,pdf 会正确呈现!

更新:

解决方案:我有css标签如下:

html {
  overflow-y: scroll;
}

这是为了防止网页超过可见内容高度时内容移位。

问题:有人知道我如何保留这个标签,而只在模态窗口中忽略它吗?

【问题讨论】:

标签: javascript jquery angularjs twitter-bootstrap pdf


【解决方案1】:

将模态对话框的转换属性更改为无。

.modal-dialog {
  transform: none;
}

【讨论】:

    猜你喜欢
    • 2020-12-12
    • 2022-06-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-03
    • 1970-01-01
    • 1970-01-01
    • 2019-08-20
    相关资源
    最近更新 更多