推荐的方法嵌入PDF在HTML?

在HTML中嵌入PDF的推荐方法是什么?

iFrame吗? 对象? 嵌入?

Adobe是怎么说的呢?

在我的例子中，PDF是动态生成的，因此不能在刷新之前将其上传到第三方解决方案。

当前回答

如果您不想自己托管PDF文件，或者希望使用额外的安全功能(例如防止用户下载PDF文件)自定义PDF查看器。我建议使用CloudPDF。https://cloudpdf.io

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudPDF Viewer</title>
  <style>
    body, html {
      height: 100%;
      margin: 0px;
    }
  </style>
</head>
<body style="height: 100%">
  <div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
  <script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function(){
      const config = { 
        documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
        darkMode: true,
      };
      CloudPDF(config, document.getElementById('viewer')).then((instance) => {

      });
    });
  </script>
 </body>
</html>

2021-01-02 23:36:59

其他回答

最好的方法可能是使用PDF.JS库。它是一个纯HTML5/JavaScript PDF文档渲染器，没有任何第三方插件。

在线演示: https://mozilla.github.io/pdf.js/web/viewer.html

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

2008-11-15 00:01:51

创建一个容器来保存PDF < div id = "例二" > < / div > 告诉PDFObject要嵌入哪个PDF，以及在哪里嵌入它 < script src = " / js / pdfobject.js " > < /脚本> > <脚本PDFObject.embed(“/ pdf / sample-3pp.pdf”、“#例二”),> < /脚本您可以选择使用CSS来指定视觉样式，包括尺寸、边框、页边距等。 <时尚> .pdfobject-container{高度:500px;} .pdfobject {border: 1px solid #666;｝ > < /风格

来源:https://pdfobject.com/

2016-08-19 00:30:56

现代的“完整页面截图”服务或脚本如今能够生成完整HTML和PDF页面的长屏幕截图，并将其转换为JPG或PNG文件，然后可以作为img元素嵌入。

2022-06-02 10:55:26

只使用iFrame的PDF文件。

我在React.js应用程序中有特定的需求，尝试了数百万个解决方案，但最终得到了一个iFrame:)祝你好运!

2020-06-06 21:00:13

构造一个输入PDF字节的blob 使用跨浏览器补丁的iframe和PDF.js 解决方案

iframe的URI应该是这样的:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

现在FF, Chrome, IE 11和Edge都在iframe中显示PDF，通过URL中的标准blob URI传递。

2018-07-18 13:10:29

推荐的方法嵌入PDF在HTML?

推荐文章

最新文章

标签