Javascript 如何使用RequireJS加载PDF.JS及其Viewer.JS？_Javascript_Spring Mvc_Webpack_Requirejs_Pdfjs

Javascript 如何使用RequireJS加载PDF.JS及其Viewer.JS？

javascript spring-mvc webpack requirejs

Javascript 如何使用RequireJS加载PDF.JS及其Viewer.JS？,javascript,spring-mvc,webpack,requirejs,pdfjs,Javascript,Spring Mvc,Webpack,Requirejs,Pdfjs,我正在尝试用RequireJS加载PDF.JS及其Viewer.JS。依赖关系得到解决，项目构建没有问题，但Javascript似乎在控制台中崩溃，没有任何错误项目结构如果我访问静态/site/js/pdfjs/web/viewer.html，则查看器工作正常：但是如果我通过test.jsp（通过Spring controller绑定到/site/）访问，结果就是破坏了布局： CSS和依赖关系在test.jsp案例中得到了很好的解决（因此Maven的资源配置等没有错）：所以我猜是

我正在尝试用RequireJS加载PDF.JS及其Viewer.JS。依赖关系得到解决，项目构建没有问题，但Javascript似乎在控制台中崩溃，没有任何错误

项目结构

如果我访问静态

/site/js/pdfjs/web/viewer.html

，则查看器工作正常：

但是如果我通过

test.jsp

（通过Spring controller绑定到

/site/

）访问，结果就是破坏了布局：

CSS和依赖关系在

test.jsp

案例中得到了很好的解决（因此Maven的资源配置等没有错）：

所以我猜是Javascript，但控制台是空的

以下是控制台中断开布局的结果：

以下是我如何使用RequireJS加载PDFJS：

test.jsp标题

NB我跳过了

中的部分，因为它与

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>

最后，可以在控制台中访问

PDFViewerApplication

，并通过RequireJS解析和加载依赖项

我不明白Javascript在哪里崩溃

我猜PDF.JS（似乎与webpack捆绑在一起）和RequireJS之间有某种联系，但我使用依赖顺序和垫片解决了这个问题，但它崩溃了，没有显示任何错误

感谢您的帮助。

请验证加载文件的顺序。也许静态页面和jsp页面之间有区别？事实上，jsp页面没有指向资源的链接

。它现在运转良好。谢谢你指出这一点。谢谢@Paul！这对我很有帮助。请验证加载文件的顺序。也许静态页面和jsp页面之间有区别？事实上，jsp页面没有指向资源的链接

。它现在运转良好。谢谢你指出这一点。谢谢@Paul！这真的帮助了我。

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']);
});

// 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';
});