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

iFrame吗? 对象? 嵌入?

Adobe是怎么说的呢?

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


当前回答

通过ImageMagick将其转换为PNG,并显示PNG(快速和肮脏)。

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

如果你需要一个快速的解决方案,想要避免跨浏览器的PDF查看问题,如果PDF只有一页或两页,这是一个很好的选择。当然,您需要在web服务器上安装ImageMagick(这反过来需要Ghostscript),这在共享托管环境中可能不可用。还有一个PHP插件(称为imagick)就像这样工作,但它有自己的特殊要求。

其他回答

<object width="400" height="400" data="helloworld.pdf"></object>

同时使用<object>和<embed>将为您提供更广泛的浏览器兼容性。

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

构造一个输入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传递。

这是我对AXIOS和Vue.js所做的:

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

将urlPDF动态添加到HTML:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

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