如何使用 JavaScript 动态更改 PDF 对象/嵌入文件的“src”或“数据”？答案

【问题标题】：How to dynamically change the "src" or "data" for a PDF Object / Embed file using JavaScript?如何使用 JavaScript 动态更改 PDF 对象/嵌入文件的“src”或“数据”？
【发布时间】：2010-09-10 21:14:44
【问题描述】：

我有一个动态加载 PDF 文件以在浏览器中查看的 Web 应用程序。目前，它使用“innerHTML”将 div 替换为 PDF 对象。这行得通。

但是，有没有更好的方法来获取元素的 ID 并为 Object / Embed 设置“src”或“data”参数并让它立即加载新文档？我希望 Adobe Acrobat Reader 的实例会留在屏幕上，但新文档会加载到其中。

这是一个对象的 JavaScript 示例：

document.getElementById(`divPDF`).innerHTML = `<OBJECT id='objPDF' DATA="'+strFilename+'" TYPE="application/pdf" TITLE="IMAGING" WIDTH="100%" HEIGHT="100%"></object>`;

感谢任何见解。

【问题讨论】：

标签： javascript pdf object embed

【解决方案1】：

function pdfLoad(datasrc) {

          var x =  document.getElementById('objPDF');
          x.data = datasrc;

        }

这对我有用

【讨论】：

【解决方案2】：

使用外部PDF-Reader.EXE 在外部窗口 PDFN 中打开 PDF 链接：

点击以下按钮：

<FORM action=""> 
    <INPUT type="button" value="PDF file" 
        onclick="window.open('http://www.Dku-betrieb.eu/Pdfn.html', 
        'PDFN', 'width=620, height=630')">
</FORM>

在外部窗口中打开此框架集Pdfn.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
    <meta http-equiv="refresh" content="12;url=http://www.dku-betrieb.eu/Pdfn1.html">
    <head>
        <title>Reader</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <frameset>
    <frame src="http://www.dku-betrieb.eu/File.pdf" frameborder=0 name="p1">
    </frameset>
</HTML>

在 12 秒内刷新到下载 PDF-Reader：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
    <head>
        <title>Reader</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <frameset >
    <frame src="http://www.dku-betrieb.eu/PDFReader.exe" frameborder=0 name="p2">
    </frameset>
</HTML>

在外部窗口 PDFN 中显示 PDF 文件。

【讨论】：

【解决方案3】：

@lark 稍作修正：

$('#objPDF').attr('data','dirToPDF');

# 指定 objPDF 是 ID 而不是元素名称。虽然我仍然不知道这是否可行。

@特里斯坦看看jQuery Media plugin。它也提到了对 PDF 的支持，尽管我从未使用过它。

【讨论】：

【解决方案4】：

如果 PDF 的处理程序是 acrobat（不一定是），它会公开一个 JS 接口，此处记录：

http://www.adobe.com/devnet/acrobat/pdfs/js_api_reference.pdf

看看你是否可以在 document.getElementById('objPDF') 上调用 openDoc(urlToPdf) -- 即使这样可行，它也只有在使用 Acrobat 处理“应用程序/pdf”时才有效

【讨论】：

【解决方案5】：

我不确定这是否可行，因为我还没有在我的项目中尝试过。

（看你的JS，相信你用的是jQuery，如果不是，请指正）

使用对象填充 divPDF 后，您可以尝试以下代码：

$("objPDF").attr({
    data: "dir/to/newPDF"
});

同样，我不确定这是否适合您的特定需求，但如果您将此代码附加到事件处理程序，您可以切换出对象的数据。

您也可以将其包装在一个函数中以反复使用：

function pdfLoad(dirToPDF) {
    $("objPDF").attr({
        data: dirToPDF
    });
}

【讨论】：