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

I have a web application that is dynamically loading PDF files for viewing in the browser. Currently, it uses "innerHTML" to replace a div with the PDF Object. This works.

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

But, is there a better way to get the ID of the element and set the "src" or "data" parameter for the Object / Embed and have it instantly load up a new document? I'm hoping the instance of Adobe Acrobat Reader will stay on the screen, but the new document will load into it.

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

Here is a JavaScript example of the object:

这是对象的JavaScript示例:

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

Any insight is appreciated.

任何见解都表示赞赏。

5 个解决方案

#1

I am not sure if this will work, as I have not tried this out in my projects.

我不确定这是否有效,因为我没有在我的项目中尝试过这个。

(Looking at your JS, I believe you are using jQuery. If not, please correct me)

(看看你的JS,我相信你正在使用jQuery。如果没有,请纠正我)

Once you have populated the divPDF with the object you might try the code below:

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

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

Again, I am not sure if this will work for your particular needs but if you attach this code to an event handler you can switch out the data of the object.

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

You could also wrap it in a function to be used over and over again:

您也可以将它包装在一个反复使用的函数中:

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

#2

If the handler for the PDF is acrobat (it doesn't have to be), it exposes a JS interface that is documented here:

如果PDF的处理程序是acrobat(它不一定是),它会公开一个JS接口,在这里记录:

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

See if you can call openDoc(urlToPdf) on document.getElementById('objPDF') -- even if this works, it only works when Acrobat is being used to handle 'application/pdf'

看看你是否可以在document.getElementById('objPDF')上调用openDoc(urlToPdf) - 即使这样可行,它只适用于Acrobat用于处理'application / pdf'的情况

#3

@lark A slight correction:

@lark略微纠正:

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

The # specifies the objPDF is an ID and not an element name. Though I still don't know if this will work.

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

@Tristan Take a look at the jQuery Media plugin. It mentions support for PDF as well, though I have never used it.

@Tristan看一下jQuery Media插件。虽然我从未使用它,但它也提到了对PDF的支持。

#4

Open a PDF-Link in a external window PDFN with a external PDF-Reader.EXE:

使用外部PDF-Reader.EXE在外部窗口PDFN中打开PDF-Link:

Clicking on the following button:

单击以下按钮:

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

opens this frameset Pdfn.html in an external window:

在外部窗口中打开此框架集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>

which refreshes in 12 seconds to the download of the PDF-Reader:

在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>

showing as result the PDF-file in the external window PDFN.

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

#5

function pdfLoad(datasrc) {

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

        }

This worked for me

这对我有用

#1