Question

                     TransactionId   Value ChargerState
Timestamp
2018-01-07 22:00:00         633025  674.87     Charging
2018-01-07 22:15:00         633025  676.11     Charging
2018-01-07 22:30:00         633025  677.06     Charging

期望的行为是使返回的URL后面的.pdf显示在$(document).on('click', '#uploadSubmit', function(e){ var myForm = document.getElementById('fileUploadForm'); var data = new FormData(myForm); $.ajax({ type:'POST', url:'/shipments/upload_docs/', processData: false, contentType: false, cache: false, data: data, success: function(result){ $('.docs_action_tray').slideUp(); var iframe = $('<iframe style="width: 40em; height: 30em;">'); iframe.attr('src', result.url); $('#actionWindow').append(iframe); } }); });中。它在Firefox中运行良好，但是Chrome只是给了我一个<iframe>按钮，将其加载到Reader中。这是安全僵局，还是对我有解决方案？

编辑：我已经测试了OPEN和<object>，并且发生了相同的行为。我得到一个打开文档的链接，而不是文档本身的预览。我想知道是否有默认的安全功能会压倒我的努力吗？

OSX 10.12.6 Chrome 69.0.3491.100（Official Build）（64位）

Answer 1

我的浏览器完美显示了带有iframe的pdf文件。但是，为您提供解决方案的方法是使用embed或object标签，例如：

<html>
<body>
    <embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="500" height="375">
</body>
</html>

<html>
    <body>
       <object width="400" height="500" type="application/pdf" data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
            <p>Insert your error message here, if the PDF cannot be displayed.</p>
        </object>
    </body>
</html>

另一种方法是使用PDF.JS库。它是PDF文档的纯HTML / Js渲染器，没有任何第三方插件。

在线演示： http://mozilla.github.com/pdf.js/web/viewer.html

GitHub： https://github.com/mozilla/pdf.js

干杯！

编辑： 您可以尝试通过将pdf文件的页面转换为图像并显示它们来模拟这一点。这不像真实的体验，但也许行得通。以下是一些可能对您有帮助的链接：

Answer 2

明确链接到StackOverflow上的此“问题”。

Embedding pdf into html5 pages with a customed interface, still being interractable

没有跨平台且性能不佳...所以我建议您像链接中所述重新实现渲染

iframe中的PDF-适用于Firefox，但不适用于OSX上的Chrome

2 个答案: