1

PDFTron 可以选择提供自定义 Javascript 文件来修改查看器，但我不确定该文件应该包含什么内容，而且我在网络上找不到任何示例。

该网站有以下描述：

查看器选项 - 默认情况下，PWS 云文档加载到 WebViewer 的基本托管版本中。您可以通过加载外部 JavaScript 配置文件来自定义查看器的外观、品牌和自定义功能。

当我提供这个文件时，window.WebViewerUniversalInstance为空，并且document.getElementById('DocumentViewer')也返回一个空对象。

有人可以在这里指出我正确的方向吗，我迷路了。

谢谢

4

2 回答 2

4

此 JavaScript 文件在查看器的内部 html 页面 (ReaderControl.html) 的上下文中运行，允许您直接在查看器中修改内容，因此 WebViewerUniversalInstance 将为空（因为它不在内部页面中）。但是，我使用var ele = document.getElementById('DocumentViewer');and ele not null 制作了一个小测试文件，所以我不太确定为什么这对您不起作用。

无论如何，一些你可以做的事情的例子。对于自定义操作，您可能希望在“viewerLoaded”或“documentLoaded”事件中运行代码。对于 UI 更改，您不需要在任何一个事件中都有代码。

因此，例如，如果您想隐藏打印按钮，您可以将其放入文件中：

$('#printButton').hide();

对于修改 UI 相关的东西，我建议右键单击，检查元素以找到要修改的东西的 ids/classes。或者，您可以下载WebViewer并查看 ReaderControl.html。

这是在 viewerLoaded 事件中做某事的示例：

$(document).on('viewerLoaded', function() {
    readerControl.docViewer.SetMargin(0);
});

下面是一个在 documentLoaded 事件中做某事的例子：

$(document).on('documentLoaded', function() {
    readerControl.setCurrentPageNumber(2);
    readerControl.rotateClockwise();
    readerControl.setZoomLevel(2);
});

您可以做很多很多事情，您可以在此处查看文档：http ://www.pdftron.com/webviewer/demo/lib/html5/doc/

您可能感兴趣的一些对象：

  • readerControl：在 viewerLoaded 后可用
  • DocumentViewer：加载查看器后可用（readerControl.docViewer）
  • 文档：在 documentLoaded (docViewer.GetDocument()) 后可用

如果您有更多问题，您可以随时在 WebViewer 论坛上提问：https ://groups.google.com/forum/#!forum/pdfnet-webviewer

于 2014-10-27T17:52:35.730 回答
1

我不确定我是否完全理解你的问题，但这是我在 PDFViewer 中为外部配置文件所做的，希望这会在一定程度上有所帮助：

<script type="text/javascript">
$(function () {
    var customData = { serviceUrl: 'services/PDFWebService.asmx', token: '<%=initialDoc.Value %>', isReadonly: '<%=IsReadonly?"yes":"no" %>' };
    var myWebViewer = new PDFTron.WebViewer({
        path: "Resources/js/PDFTron",
        mobileRedirect: false, // Disable redirect in mobile view.
        stream: true,
        config: 'Resources/js/PDFViewerConfig.js',
        documentType: "pdf",
        custom: JSON.stringify(customData),
        l: '<%=LicenseKey%>',
        initialDoc: customData.serviceUrl + '/GetFile?token=' + customData.token
    }, document.getElementById('viewer'));
});

我的 PDFViewerConfig.js 是：

(function () {

$(document).on('viewerLoaded', function () {
    customData = JSON.parse(window.ControlUtils.getCustomData());
    SetupCustomizations();
});

$(document).on('documentLoaded', function () {
    setDisabled("#btnSave");
    setDisabled("#btnReset");
    setDisabled("#btnPushUp");
});

$(document).on('pageChanged', function (event) {

    var currentPageNumber = readerControl.getCurrentPageNumber();
    var totalPages = readerControl.docViewer.getDocument().getPageCount();
    if (currentPageNumber == totalPages) {
        setDisabled("#btnPushDown");
        setEnabled("#btnPushUp");
    }
    else if (currentPageNumber == 1) {
        setDisabled("#btnPushUp");
        setEnabled("#btnPushDown");
    }
    else {
        setEnabled("#btnPushUp");
        setEnabled("#btnPushDown");
    }
});
})();

function SetupCustomizations() {

if (customData && customData.isReadonly != "yes") {
    var removeButton = $('<span aria-disabled="false" role="button" tabindex="0" class="glyphicons  remove" title="remove page"></span>');
    var saveButton = $('<span aria-disabled="true" role="button" tabindex="0" id="btnSave" class="glyphicons floppy_disk disabled" title="save changes"></span>');
    var resetButton = $('<span aria-disabled="true" role="button" tabindex="0" id="btnReset" class="glyphicons restart disabled" title="reset to original"></span>');

    var rotateRightButton = $('<span aria-disabled="false" role="button" tabindex="0" class="glyphicons share" title="rotate right"></span>');
    var rotateLeftButton = $('<span aria-disabled="false" role="button" tabindex="0" class="glyphicons unshare" title="rotate left"></span>');

    var pushDownButton = $('<span aria-disabled="false" role="button" tabindex="0" id="btnPushDown" class="glyphicons down_arrow" title="move current page down"></span>');
    var pushUpButton = $('<span aria-disabled="true" role="button" tabindex="0" id="btnPushUp" class="glyphicons up_arrow disabled" title="move current page up"></span>');


    removeButton.on('click', onRemove);
    removeButton.on('keydown', onRemove);

    saveButton.on('click', onSave);
    saveButton.on('keydown', onSave);

    resetButton.on('click', onReset);
    resetButton.on('keydown', onReset);

    rotateRightButton.on('click', onRotateRight);
    rotateRightButton.on('keydown', onRotateRight);

    rotateLeftButton.on('click', onRotateLeft);
    rotateLeftButton.on('keydown', onRotateLeft);

    pushDownButton.on('click', onPushDown);
    pushDownButton.on('keydown', onPushDown);

    pushUpButton.on('click', onPushUp);
    pushUpButton.on('keydown', onPushUp);

    var newButtonsPlaceholder = $("#downloadButton").parent();
    newButtonsPlaceholder.prepend(removeButton);
    newButtonsPlaceholder.prepend(rotateLeftButton);
    newButtonsPlaceholder.prepend(rotateRightButton);
    newButtonsPlaceholder.prepend(pushDownButton);
    newButtonsPlaceholder.prepend(pushUpButton);
    newButtonsPlaceholder.prepend(saveButton);
    newButtonsPlaceholder.prepend(resetButton);
}

//508
$("#ui-id-3").attr("tabindex", "0");
$("#prevPage").attr("tabindex", "0");
$("#nextPage").attr("tabindex", "0");
$("#printButton").attr("tabindex", "0");
$("#fullScreenButton").attr("tabindex", "0");
$("#downloadButton").attr("tabindex", "0");
$("#zoomIn").attr("tabindex", "0");
$("#zoomOut").attr("tabindex", "0");
$("#fitWidth").attr("tabindex", "0");
$("#fitPage").attr("tabindex", "0");

$("#prevPage").attr("role", "button");
$("#nextPage").attr("role", "button");
$("#printButton").attr("role", "button");
$("#fullScreenButton").attr("role", "button");

$("#zoomIn").attr("role", "button");
$("#zoomOut").attr("role", "button");
removeExtraButtons();
}
于 2017-02-12T14:03:39.497 回答