如何引入额外CSS文件？解决print-js的MIME类型不匹配报错

这个MIME类型不匹配的问题我之前也遇到过，大概率是文件路径错误或者服务器没有正确识别CSS文件的类型，给你几个排查和解决的步骤：

• 第一步：验证文件路径是否正确
  直接在浏览器地址栏输入 http://localhost:4200/assets/printStyles.css，看看能不能正常打开你的CSS文件。如果打开的是404页面或者其他HTML内容，说明路径写错了——检查文件名大小写（Linux环境下大小写敏感）、assets文件夹的层级是否正确，确保文件确实放在src/assets目录下。

• 第二步：确认Angular的静态资源配置
  打开项目根目录的angular.json文件，找到assets数组，确保里面包含了"src/assets"配置，比如：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  

  如果没有的话，添加进去，然后重启Angular开发服务器（ng serve），让配置生效。

• 第三步：检查服务器的MIME类型设置
  如果你用的是Angular CLI自带的开发服务器，一般默认会正确返回CSS的text/css类型，但如果是生产环境的服务器（比如Nginx、Apache），需要确保配置了正确的MIME映射：

  • Nginx：在配置文件中添加或确认以下内容

    types {
      text/css css;
    }
    

  • Apache：确保httpd.conf中存在这条配置

    AddType text/css .css
    

• 第四步：使用正确的路径写法调用print-js
  避免硬编码绝对路径，试试用相对路径或者通过Angular的DOCUMENT服务构建正确的URL：

  import { DOCUMENT } from '@angular/common';
  import { Inject } from '@angular/core';
  
  constructor(@Inject(DOCUMENT) private document: Document) {}
  
  // 调用print-js时的写法
  const cssUrl = `${this.document.location.origin}/assets/printStyles.css`;
  printJS({
    printable: 'your-target-element-id',
    type: 'html',
    css: cssUrl
  });
  

• 第五步：清除缓存
  浏览器缓存或者Angular的构建缓存可能导致旧的错误响应被保留，试试：

  • 按Ctrl+Shift+R强制刷新浏览器
  • 运行ng clean清理Angular构建缓存，然后重启开发服务器

• 备选方案：内联CSS样式
  如果上面的方法都没解决问题，可以直接把printStyles.css里的样式内容作为字符串传入print-js的css参数，绕开文件加载的问题：

  const printStyles = `
  /* 这里粘贴printStyles.css里的所有样式代码 */
  @media print {
    body { font-size: 12px; }
    /* 其他打印样式 */
  }
  `;
  
  printJS({
    printable: 'your-target-element-id',
    type: 'html',
    css: printStyles
  });
  

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