Question

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

该网站有以下描述：

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

当我提供此文件时， window.WebViewerUniversalInstance 为空， document.getElementById（'DocumentViewer'）也会返回一个空对象。

有人能指出我在正确的方向，我迷路了。

由于

Answer 1

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

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

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

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

要修改与UI相关的内容，我建议右键单击“检查元素”以查找要修改的内容的ID /类。或者，您可以下载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);
});

你可以做很多很多事情，你可以在这里查看文档：{{3}}

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

readerControl：在viewerLoaded
http://www.pdftron.com/webviewer/demo/lib/html5/doc/：在viewerloaded（readerControl.docViewer）
DocumentViewer：在documentLoaded（docViewer.GetDocument（））之后可用

如果您有更多问题，可以随时在WebViewer论坛上提问：Document

Answer 2

我不确定我是否完全理解您的问题，但这是我在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();
}

PDFTron自定义脚本应该包含哪些内容？

2 个答案: