如何将字符串变量传递给匿名 Adobe View SDK 脚本?

Question

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

我的最终目标是能够通过单击按钮来更改在查看器中打开的 pdf 文档的名称，该按钮需要将名为"docName"的字符串变量传递给 View SDK 脚本调用的 url。由于页面加载时 url 已经在模态元素内的脚本中指定，以下是我对传递字符串变量所需的附加脚本的想法： 按钮单击调用我的脚本(函数 changeName(docName((并传递"docName"变量。然后我的脚本需要将此变量传递给 View 脚本中的 url(这是我不知道该怎么做的部分(，然后刷新页面以重新加载我的模态，然后将模态的显示样式更改为"block"。 我将复制下面的 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>

Answer 1

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

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

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，然后显示它。