0

我对 javascript 有非常基本的了解，但我一直无法为我对 Adob​​e View SDK API 的特定使用找到解决方案，尽管似乎应该有办法。我正在制作一个网页以在 pdf 查看器中显示时事通讯。我创建了一个 w3.css 模态元素，以便我可以通过单击按钮打开查看器，然后在角落中使用“x”关闭它。按钮单击和“x”在显示样式为“无”或“块”之间切换。我真的很喜欢这个解决方案，因为它让我可以使用新闻通讯的小图像作为按钮，并且可以在此处观察到：通过单击 2020 年 5 月 4 日下方的新闻通讯图像来测试新闻页面。

我的最终目标是能够通过单击按钮更改在查看器中打开的 pdf 文档的名称，这需要将一个名为“docName”的字符串变量传递给 View SDK 脚本调用的 url。由于页面加载时已在我的模式元素内的脚本中指定了 url，因此我对需要传递字符串变量的附加脚本的想法如下： 按钮单击调用我的脚本（函数 changeName(docName)）并传递“docName”变量。然后我的脚本需要把这个变量传给View脚本中的url（这是我不知道怎么做的部分），然后刷新页面重新加载我的模态，然后将模态的显示样式改为“堵塞”。我将复制下面 View SDK 的代码，

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
        content:{location: {url: "https://www.shcsfarmington.org/" + docName + ".pdf"}},
        metaData:{fileName: "Newsletter_050420.pdf"}
    }, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});
});
</script>

看起来这应该可行，但是由于我对 javascript 的了解有限，我不知道如何将此变量传递给 View SDK 代码中的匿名函数，并且我需要解决方案语法中的尽可能多的细节和细节。我很感激这方面的任何帮助。谢谢。

编辑：我想也许它会有助于显示我迄今为止提出的函数的代码 - 然后可以检查它并且更容易调试和评论：

<button id="CSS-050420" onclick="changeDoc('Newsletter_050420');"></button>
<script>
function changeDoc(docName) {

/* Need to pass docName to url=https://shcsfarmington.org/2020/news/Newsletter_" + newsDate + ".pdf"; */
window.location.reload(true);
document.getElementById('viewerModal').style.display='block'; 
}
</script>
4

1 回答 1

0

我在这里创建了一个 CodePen供您查看。

基本上，当 SDK 准备就绪时，您将加载第一个文件，但是您需要在重新创建之前将 adobeDCView 设置为 null。

function showPDF(url) {
    adobeDCView = null;
    fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
        adobeDCView = new AdobeDC.View({
        // This clientId can be used for any CodePen example
        clientId: "e800d12fc12c4d60960778b2bc4370af",
        // The id of the container for the PDF Viewer
        divId: "adobe-dc-view"
        });
        adobeDCView.previewFile(
        {
            content: { promise: Promise.resolve(blob.arrayBuffer()) },
            metaData: { fileName: url.split("/").slice(-1)[0] }
        },
        {
            embedMode: "FULL_WINDOW",
            defaultViewMode: "FIT_PAGE",
            showDownloadPDF: true,
            showPrintPDF: true,
            showLeftHandPanel: false,
            showAnnotationTools: false
        }
        );
    });
}

链接点击甚至会将 url 传递给 PDF，然后显示它。

于 2020-06-09T19:39:58.297 回答