Question

我正在尝试使用PDFObject来内联显示pdf文件。该应用程序可能包含许多文件。所有文件都显示在列表中。在单击任何一个文件时，如果浏览器包含pdf插件，则应该可以查看pdf，或者显示一些锚标记来下载文件。

我遇到的问题是......我无法弄清楚如何将文件名从viewmodel传递到zul页面中的脚本。

这是我到目前为止所做的......

<?page title="Auto Generated index.zul"?>
<?script type="text/javascript" src="pdfobject.js"?>
<window title="Hello World!!" border="normal" width="200px"     apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.shahukhalroshan.vm.DemoViewModel')"  xmlns:w="http://www.zkoss.org/2005/zk/client">
<button label="ok" w:onClick="embedPDF()" />
<script type='text/javascript'>
  function embedPDF(){
    var myPDF = new PDFObject({ 
      url: 'abc.pdf'
    }).embed();  
  }
  window.onload = embedPDF; //Feel free to replace window.onload if needed.       
</script>
    <div>
       It appears you don't have Adobe Reader or PDF support in this web
       browser. <a href="abc.pdf">Click here to download the PDF</a>
    </div>  
</window>

Answer 1

在这个fiddle中，您有一个使用PDFObject进行动态加载的示例。我只对你的代码做了一些小改动。问题：pdf容器似乎有一个150px的固定高度，但我相信你可以从现在开始找到一些调整： - ）

<强> Index.zul

<?script type="text/javascript" src="http://pdfobject.com/scripts/pdfobject.js"?>
<zk>
  <script type='text/javascript'>
  function embedPDF(_url){
    var myPDF = new PDFObject({ 
      url: _url
    }).embed('pdfContainer');  
  }
</script>

  <vlayout apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestVM')" xmlns:w="http://www.zkoss.org/2005/zk/client">
    <listbox model="@load(vm.pdfUrls)">
      <template name="model" var="url">
        <listitem>
          <listcell label="@load(url)" />
          <listcell>
            <button label="load" onClick="@command('loadPdf', url=url)" />
          </listcell>
        </listitem>
      </template>
    </listbox>
    <vlayout xmlns:n="native">
      <n:object id="pdfContainer"></n:object>
    </vlayout>
  </vlayout>
</zk>

<强> TestVM.java

import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.BindingParam;
import java.util.List;
import java.util.ArrayList;
import org.zkoss.zk.ui.util.Clients;

public class TestVM {

    List<String> pdfUrls;

    @AfterCompose
    public void afterCompose() {
      pdfUrls = new ArrayList<String>();
      pdfUrls.add("http://www.pdf995.com/samples/pdf.pdf");
      pdfUrls.add("https://partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf");
      pdfUrls.add("https://www.iscp.ie/sites/default/files/pdf-sample.pdf");
    }

  @Command
    public void loadPdf(@BindingParam("url")String url) {
      Clients.evalJavaScript("embedPDF('"+ url +"')");
    }

  public List<String> getPdfUrls() {
    return pdfUrls;
  }

}

干杯，亚历克斯

将值从viewmodel传递到zk中的脚本

1 个答案: