Drupal 11中CDN加载PDF.js失败的技术求助

一、修复CDN资源MIME类型不匹配问题 #

CDN返回text/plain MIME类型导致浏览器拦截，可通过以下两种方式解决：

1. 明确指定资源的正确MIME类型 #

在加载PDF.js和worker文件时，添加type="application/javascript"属性，强制浏览器识别为JS文件：

<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist/build/pdf.min.js" type="application/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist/build/pdf.worker.min.js" type="application/javascript"></script>

2. 本地托管PDF.js资源 #

放弃CDN方案，直接将PDF.js文件托管到Drupal主题目录：

• 下载PDF.js官方稳定版压缩包，解压后将build目录下的pdf.min.js、pdf.worker.min.js复制到Solo主题的js/pdfjs/文件夹
• 在主题的libraries.yml中定义资源库：

pdf_viewer:
  js:
    js/pdfjs/pdf.min.js: {}
    js/pdfjs/pdf.worker.min.js: { attributes: { worker-src: 'js/pdfjs/pdf.worker.min.js' } }
  dependencies:
    - core/jquery

• 在需要展示PDF的页面或区块中，通过attach_library('solo/pdf_viewer')加载资源

二、安全实现PDF展示（避免网站崩溃） #

之前自定义模块导致网站崩溃，建议采用更稳妥的方式：

1. 使用成熟社区模块替代自定义开发 #

直接选用Drupal社区现成的PDF展示模块：

• PDF Viewer Field：支持以字段形式添加PDF，内置PDF.js渲染逻辑，配置简单
• Media PDF Viewer：结合Drupal媒体系统管理PDF文件，自带预览功能
  安装模块后，在内容类型中添加对应字段，上传二战信件PDF即可完成展示。

2. 规范自定义区块开发（若坚持自定义） #

遵循Drupal开发规范编写代码，避免网站崩溃：

• 将资源加载、PDF渲染代码封装在自定义区块的build()方法中
• 确保JS代码在DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  const pdfUrl = '/path/to/your/wwii-letter.pdf';
  const pdfjsLib = window['pdfjs-dist/build/pdf'];
  pdfjsLib.GlobalWorkerOptions.workerSrc = drupalSettings.path.baseUrl + 'themes/solo/js/pdfjs/pdf.worker.min.js';
  
  const loadingTask = pdfjsLib.getDocument(pdfUrl);
  loadingTask.promise.then(function(pdf) {
    // 渲染第一页示例
    pdf.getPage(1).then(function(page) {
      const scale = 1.5;
      const viewport = page.getViewport({ scale: scale });
      const canvas = document.getElementById('pdf-canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext);
    });
  }).catch(function(error) {
    console.error('PDF加载失败:', error);
  });
});

• 通过drupalSettings传递PDF路径和worker路径，避免硬编码

三、清理网站崩溃遗留问题 #

• 登录Drupal后台，进入模块管理页面，禁用并卸载有问题的自定义模块
• 清理Drupal所有缓存（配置缓存、页面缓存等）
• 检查服务器日志（Apache/Nginx日志、PHP错误日志），定位并修复潜在异常

内容的提问来源于stack exchange，提问作者Robert Neil