推荐的方法嵌入PDF在HTML?

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

iFrame吗? 对象? 嵌入?

Adobe是怎么说的呢?

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

当前回答

创建一个容器来保存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

其他回答

我发现这工作得很好，浏览器处理它在firefox。我没有检查IE…

<script>window.location='url'</script>

2017-10-13 13:44:56

这是快速、简单、直截了当的，不需要任何第三方脚本:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

更新(2/3/2021)

Adobe现在提供了自己的PDF嵌入API。

https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

更新(1/2018):

Android上的Chrome浏览器不再支持PDF嵌入。你可以通过使用谷歌Drive PDF查看器来解决这个问题

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

2011-08-12 17:29:23

我发现嵌入pdf的最好方法是使用bootstrap，因为它不仅可以显示pdf，而且还可以填充可用空间，您可以根据自己的需要指定比例。下面是我用它做的一个例子:

2020-08-15 18:31:25

在我得到嵌入base64编码PDF的问题之前，因为URI限制，所以任何超过2MB的文件都不会在Chrome上正确呈现。

我的解决方案是:

转换uri编码为Blob: 基于Blob生成临时DOM字符串。 const blob = dataURItoBlob(this.dataUrl); var temp_url = window.URL.createObjectURL(blob); 决定你想把iframe附加到DOM的位置: const target = document.querySelector(targetID); 目标。innerHTML =' <iframe src='${temp_url}' type="application/pdf"></iframe> .

2020-08-18 03:35:56

如果您不想自己托管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在HTML?

推荐文章

最新文章

标签