Как загрузить PDF.JS и его Viewer.JS с RequireJS? - PullRequest
Новая
       75

Как загрузить PDF.JS и его Viewer.JS с RequireJS?

0 голосов
/ 25 октября 2019

Я пытаюсь загрузить PDF.JS и его Viewer.JS с RequireJS. Зависимости устранены, проект компилируется без проблем, но Javascript, по-видимому, аварийно завершает работу без ошибок в консоли.

Структура проекта

project structure

Если я получаю доступ к статическому /site/js/pdfjs/web/viewer.html, программа просмотра работает нормально:

static viewer

Но если я получаю доступ через test.jsp (связанныйв /site/ контроллером Spring), результат - просто разбитый макет:

dynamic viewer

CSS и зависимости хорошо разрешены в случае test.jsp (так что это не неправильная конфигурация ресурсов Maven и т. д.):

dynamic viewer resources

Так что я думаю, что это Javascript, но консоль пуста.

Вот результат в консоли для разбитого макета:

enter image description here

Вот как я загружаю PDFJS с RequireJS:

test.jsp заголовки

NB Я пропустил деталь внутри <body></body>, поскольку она точно такая же, как в viewer.html. 

<%@ 
    page 
    language="java" 
    contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"
    isELIgnored="false"
%>
<%@ 
    taglib 
    prefix="c"  
    uri="http://java.sun.com/jsp/jstl/core"
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="google" content="notranslate">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <link rel="stylesheet"
              type="text/css"
              href="${pageContext.request.contextPath}/js/pdfjs/web/viewer.css" />
        <title>Insert title here</title>
    </head>
    <body>
        <!-- same body content from viewer.html -->
        <script data-main="js/require/main" src="js/require/require.js">
        </script>
    </body>
</html>

маиn.js (точка входа в RequireJS) 

require.config({
    waitSeconds:60,
    paths: {
        'pdfjs-dist/build/pdf': '../pdfjs/build/pdf',
        'pdfjs-dist/build/pdf.worker': '../pdfjs/build/pdf.worker',
        'pdfjs-dist/web/viewer': '../pdfjs/web/viewer',
        'pdfjs-config': 'modules/pdf.js.config'
    },
    shim: {
        'pdfjs-config': {
            'deps': ['pdfjs-dist/build/pdf', 'pdfjs-dist/build/pdf.worker']
        },
        'pdfjs-dist/web/viewer': {
            'deps': ['modules/domReady', 'pdfjs-config']
        }
    }
});
requirejs([
    'modules/domReady',
    'modules/split', 
    'pdfjs-dist/build/pdf', 
    'pdfjs-dist/build/pdf.worker', 
    'pdfjs-config',
    'pdfjs-dist/web/viewer'
], function(
    domReady, 
    Split
) {
    console.log('PDFJS Module: ' + PDFViewerApplication + '<br>');
    console.log('PDFJS Global: ' + window['pdfjs-dist/build/pdf']);
});

pdfjs.config Эта часть предназначена для присоединения pdfjs-dist/build/pdf к window, так что Viewer.JS может потребовать его сэтот унаследованный вызов: 

// viewer.js line 4480
if (typeof window !== 'undefined' && window['pdfjs-dist/build/pdf']) {
  pdfjsLib = window['pdfjs-dist/build/pdf'];
} else {
  pdfjsLib = require('../build/pdf.js');
}

//pdf.js.config.js
define(['pdfjs-dist/build/pdf'], function(PDF) {
    window['pdfjs-dist/build/pdf'] = PDF;
    pdfFile = 'test.pdf';
});

В конце концов, к консоли можно получить доступ к PDFViewerApplication, а зависимости разрешены и загружены RequireJS.

Я не понимаю, гдеСбои Javascript.

Я предполагаю, что есть что-то между PDF.JS (кажется, в комплекте с веб-пакетом) и RequireJS, но я использовал порядок зависимостей и shim для решения этой проблемы, и все же он вылетает, не показывая никакой ошибки.

Любая помощь приветствуется.

...