Question

我正在编写一个React组件来使用Mozilla的PDF.js项目来呈现HTML格式的文档。当示例的Create-React-App项目包含

时，我已成功运行

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.527/pdf.min.js"></script>

在index.html head块中。如果我将其删除并将其插入组件render方法中，则应用程序会中断。有没有办法将<script>标签添加到应用程序的主体

背景

根据examples，您可以通过两种方式向网页添加文档：使用canvas标记呈现每个网页，或使用pdfjs-dist/web/pdf-viewer.js

代码

在Webpack examples之后（因为这是一个React项目），我想出了以下代码：

import React, {Component} from 'react';
import pdflib from 'pdfjs-dist';
import {PDFJS} from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css';

export default class PDF extends Component {
    constructor(props) {
        super(props);

        pdflib.PDFJS.workerSrc = require('file-loader!pdfjs-dist/build/pdf.worker');
        this.file = props.file;
        this.pdfViewer = null;

        this._containerId = 'viewer_container';

        this.pagesInit = this.pagesInit.bind(this);
    }

    componentDidMount() {
        this._loadDocument();
    }

    pagesInit(e) {
        this.pdfViewer.currentScaleValue = 'page-width';
    }

    _loadDocument() {
        const container = document.getElementById(this._containerId);
        this.pdfViewer = new pdflib.PDFJS.PDFViewer({
            container: container
        });

        container.addEventListener('pagesinit', this.pagesInit);

        const loadingTask = pdflib.getDocument(this.file);
        loadingTask.promise.then((document) => {
            this.pdfViewer.setDocument(document);
        }).catch((err) => {
            console.log(err);
        });
    }

    render() {
        return(
            <div id={this._containerId}>
                <div className="pdfViewer" id="viewer"></div>
            </div>

        )
    }
}

但是，由于我不知道的原因，我需要在应用程序的索引页面的头部包含pdf.js的构建，以便它在bundle之前加载。

<!--
  manifest.json provides metadata used when your web app is added to the
  homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.527/pdf.min.js"></script>
<!--
  Notice the use of %PUBLIC_URL% in the tags above.
  It will be replaced with the URL of the `public` folder during the build.
  Only files inside the `public` folder can be referenced from the HTML.

没有它，文档将不会呈现。这似乎与脚本排序直接相关。

外部React组件的一部分便利是它是自包含的，而这个脚本要求意味着这个组件肯定不是自包含的。

我尝试使用react-async-script-loader将组件包装在高阶组件中并检索脚本，但是会发生同样的错误。

我应该看一下另一种解决方案吗？

React - 在渲染而不是页面头部插入第三方脚本标记会导致应用程序失败

背景

代码

0 个答案: