0

我遵循了此处提供的 PSPDFKit React 教程

我还将我的文件复制到 /public 目录，并从node_modules那里移动了除 pspdfkit.js 之外的所有内容，并更新了我的baseUrl变量以指向该目录。

然后，当我尝试使用npm run starton 在本地运行我的 react 应用程序时localhost:3000，我从 PSPDFkit 获得了加载动画，但它挂断了，控制台给了我一个错误：

使用 WASM 方法

开始http://localhost:3000/pspdfkit-lib/pspdfkit.wasm下载。

未捕获（承诺）类型错误：无法在“WebAssembly”上执行“编译”：响应 MIME 类型不正确。预期的“应用程序/wasm”。

我知道上面有一个故障排除主题，可在此处找到，但我仍然无法解决我的问题。

有什么想法吗？

我的组件文件：

import React, {Component} from 'react';
import PSPDFKitWeb from 'pspdfkit';

class PSPDFKit extends Component {
    constructor(props, context){
        super(props, context);
        this._instance = null;
        this._container = null;

        this.onRef = this.onRef.bind(this);
        this.load = this.load.bind(this);
        this.unload = this.unload.bind(this);
      }

      onRef(container) {
        this._container = container;
      }

      //function that loads PSPDFKit library when
      async load(props) {
        console.log(`Loading ${props.pdfUrl}`);
        this._instance = await PSPDFKitWeb.load({
          disableWebAssemblyStreaming: true,
          pdf: props.pdfUrl,
          container: this._container,
          licenseKey: props.licenseKey,
          baseUrl: props.baseUrl
        });
        console.log("Successfully mounted PSPDFKit", this._instance);
      }

      unload() {
        PSPDFKitWeb.unload(this._instance || this._container);
        this._instance = null;
      }

      componentDidMount() {
        this.load(this.props);
      }

      componentDidUpdate(nextProps) {
        this.unload();
        this.load(nextProps);
      }

      componentWillUnmount() {
        this.unload();
      }

      render() {
        return <div ref={this.onRef} style={{ width: "100%", height: "100%", position: "absolute" }} />;
      }
    }

export default PSPDFKit
4

2 回答 2

1

对于任何遇到同样问题的人。您可能会通过禁用 Web 程序集流式传输（这会导致错误。react-scripts webpack 不提供正确的 mime 类型的 wasm 文件）。只需在 load 方法上将 disableWebAssemblyStreaming 作为 true 传递：

this._instance = await PSPDFKitWeb.load({
    pdf: props.pdfUrl,
    container: this._container,
    licenseKey: props.licenseKey,
    baseUrl: props.baseUrl,
    disableWebAssemblyStreaming: true, // <---- This here
  });
于 2018-10-17T22:54:56.997 回答
0

看起来问题是由未使用正确的内容类型提供的 wasm 文件引起的，因为这里推荐：https ://pspdfkit.com/guides/web/current/pspdfkit-for-web/troubleshooting/#response-有不支持的 mime 类型错误

打开package.json文件并升级react-scripts到1.1.5，删除node_modules，然后重新安装。

以后，请联系 pspdfkit.com/support/request，我们的支持团队将在那里为您提供帮助。

于 2018-08-30T17:14:46.717 回答