HarmonyOS鸿蒙Next中Vue项目使用pdfjs时，如何让web组件支持file://读取文件并兼容web worker？

为了加载安全，在ArkWeb内核中，不允许 file 协议或者 resource 协议访问 URL 上下文中来自跨域的请求，因此在使用 Web 组件加载本地离线资源的时候，Web 组件针对 file 协议和 resource 协议会进行跨域访问的拦截。

可以通过解决方案为构造虚拟域名，通过加载域名的方式进行规避，详见：https://gitee.com/openharmony/docs/pulls/40014/files

import web_webview from '@ohos.web.webview';

@Entry
@Component
export default struct MarkingPaper {
  webController: web_webview.WebviewController = new web_webview.WebviewController();

  // 构造域名和本地文件的映射表
  schemeMap = new Map([
    ["https://www.example.com/index.html", "index.html"],
    ["https://www.example.com/assets/index-xxx.js", "assets/index-xxxx.js"],
    ["https://www.example.com/assets/polyfills-xxxx.js", "assets/polyfills-legacy-xxx.js"],
    ["https://www.example.com/assets/index-legacy-xxx.js", "assets/index-legacy-xxx.js"],
    ["https://www.example.com/assets/index-xxx.css", "assets/index-xxx.css"],
  ])
  // 构造本地文件和构造返回的格式mimeType
  mimeTypeMap = new Map([
    ["index.html", 'text/html'],
    ["assets/index-xxx.js", "text/javascript"],
    ["assets/polyfills-xxxx.js", "text/javascript"],
    ["assets/index-xxxx.js", "text/javascript"],
    ["assets/index-xxx.css", "text/css"],
  ])

 build() {
    Stack({ alignContent: Alignment.Top }) {
      Web({ src: 'https://www.example.com/index.html', controller: this.webController })
        .domStorageAccess(true)
        .mixedMode(MixedMode.All)
        .width('100%')
        .height('100%')
        .onInterceptRequest((event) => {
          if (!event) {
            return;
          }
          // 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域
          if (this.schemeMap.has(event.request.getRequestUrl())) {
            let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!;
            let mimeType = this.mimeTypeMap.get(rawfileName);
            if (typeof mimeType === 'string') {
              let response = new WebResourceResponse();
              // 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置
              response.setResponseData($rawfile(rawfileName));
              response.setResponseEncoding('utf-8');
              response.setResponseMimeType(mimeType);
              response.setResponseCode(200);
              response.setReasonMessage('OK');
              response.setResponseIsReady(true);
              return response;
            }
          }
          return null;
        })
    }
  }
}

也可以使用Web组件的PDF文档预览能力：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/web/web-pdf-preview.md

可借助于三方库pdfjs预览，具体可参考：https://gitee.com/openharmony-tpc/pdfViewer，

链接内有完整的工程，可以直接运行：https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/webpdfviewer