如何在 Adob​​e 的 pdf 嵌入 API 中使用变量作为 URL-值？

Question

我使用 Adob​​e PDF Embed API (https://www.adobe.io/apis/documentcloud/dcsdk/docs.html?view=view) 在我的网站上的模式中显示 pdf。 因为我希望模式只改变一个微小的细节（那里显示的 pdf 的文件 url），所以我想动态使用文件名。所以我这样做了：

       document.addEventListener("adobe_dc_view_sdk.ready", function() {
                                var adobeDCView = new AdobeDC.View({
                                    clientId: "xyz",
                                    divId: "adobe-dc-view"
                                });
                                adobeDCView.previewFile({
                                    content: {
                                        location: {
                                            var model_filename_chosen = "https://www.URL.com/files/" +
                                                var model_filename;
                                           // Does get printed correctly
                                            console.log(model_filename_chosen);
                                          //doesn't get parsed at all
                                            url: model_filename_chosen
                                        }
                                    },
                                    metaData: {
                                        fileName: "Something"
                                    }
                                }, {

                                });
                            });

在它之前的页眉中

function openFahrzeugModal(data) {
        x = new bootstrap.Modal(document.getElementById("modalFahrzeug"));
        x.toggle();
        $('#input_model_hidden').val(data);
        var model_filename = data;
        console.log(data);
    }

那些看起来像这样的触发器：

<a onclick="openFahrzeugModal('myfile1.pdf')">
   

所以任何日志都可以正确打印，但 pdf 根本没有显示，模态可以正确打开。该变量确实正确打印在模态的其他元素中，但在 Adob​​e 嵌入对象中结果为空。我确实为代码和文件使用了相同的域，并且我的 API-key 有效。一旦我输入静态 URL（与控制台上打印的基本相同），pdf 就会正确显示。

这是为什么？我需要解决什么问题？

Answer 1

这是时间问题。一旦 我们的库加载完毕，您在顶部的代码就会 运行 。相反，您想要的是仅在用户输入时将 previewFile 代码更改为 运行。我会修改 openFahrzeugModal 以便 它 将 运行 那部分。像这样：

function openFahrzeugModal(data) {
   x = new bootstrap.Modal(document.getElementById("modalFahrzeug"));
   x.toggle();
   $('#input_model_hidden').val(data);
   var model_filename = data;
   var model_filename_chosen = "https://www.URL.com/files/" +  model_filename;

   adobeDCView.previewFile({
      content: {
         location: {
           url: model_filename_chosen
         }
      },
      metaData: {
         fileName: "Something"
      }
   }, {
   });
 }

我手打的，所以可能不完美。但是请注意，在库准备好之前，您不想 运行 单击事件。通常我会在 JS 中分配点击处理程序，而不是 HTML，并在 adobe_dc_view_sdk.ready.

的事件处理程序中执行