javascript - 如何将字符串变量传递给匿名 Adobe View SDK 脚本?
问题描述
我对 javascript 有非常基本的了解,但我一直无法为我对 Adobe 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>
解决方案
我在这里创建了一个 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,然后显示它。
推荐阅读
- r - 如何找到R中特定行的所有变量的平均值?
- python - 如何在 matplotlib 中单击时更改 pcolor 一种网格颜色?
- python - 关于将一长串数字写入文件的编码的快速 Python 问题
- c# - 使用连接字符串方法构建 DBContext 文件
- python - 递归阶乘函数最大递归深度python
- python-3.x - 有没有办法将终端数据从 Mac 获取到 python 程序
- c++ - MFC MDI 在输出窗口中切换选项卡而无需重新启动(在我的情况下)
- pandas - 查找数据库中不同项目在特定日期内的最大值
- c++ - Makefile 不工作:找不到命令和错误 127
- json - React 显示本地化版本的错误消息