sharepoint - 带有 PDF 预览的项目选择

Question

我需要使用Listbox (DropDown)制作一个 Page ，其中包含Library中的所有文件，然后是PDF Preview。

我用HTML 表单 Web 部件制作了一个页面。预览可以这样制作：

<embed height="800" width="1200" src="..." type="application/pdf">

我现在如何提供一个包含库中所有项目的列表框并将源从 更改为所选项目？

Answer 1

好吧我明白了。。

我用HTML Form Web Part创建了一个新页面，并用 Javascript 得到了这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
var siteUrl = '/XX';
var listName = 'YY';
var listItems;
function retrieveAllListProperties() {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle(listName);

    var query = new SP.CamlQuery();
    query.set_viewXml("<View Scope='RecursiveAll'><Query><OrderBy><FieldRef Name='FileLeafRef' Ascending='True' /></OrderBy></Query></View>");
    listItems = oList.getItems(query);
    clientContext.load(listItems);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {
    var listEnumerator = listItems.getEnumerator();
    $('#select').find('option').remove().end().append('<option value="">Please select</option>');
    while (listEnumerator.moveNext()) {
        var listItem = listEnumerator.get_current();
        $('#select').append('<option value="http://host' + listItem.get_item('FileRef') + '">' + listItem.get_item('FileLeafRef') + '</option>');
    }
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

$(this).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(retrieveAllListProperties, "sp.js");

    $('#etiketten').change(function() {
        $('#pdf').remove();
        if($('#select').val() != '') {
            $('#container').append('<embed name="pdf" id="pdf" height="768" width="1024" src="' + $('#select').val() + '" type="application/pdf">');
        }
    });
});
</script>

<div id="container" name="container">
<select name="select" id="select">
<option value="">Please select</option>
</select>
<br/>
</div>