未捕获的TypeError:无法读取未定义的属性'GlobalWorkerOptions'

问题描述

我正在基于HTML5画布制作白板。我添加了许多功能,例如上传图像,铅笔,橡皮擦,形状等。对于上传pdf功能,我使用pdf.js将pdf文件上传到画布。我正在使用输入标签获取文件。尝试将pdf呈现到画布时,出现错误“未捕获的TypeError:无法读取FileReader.reader.onloadend处未定义的属性'GlobalWorkerOptions'”。这是我的HTML

    <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

,输入标签

<div class="tool" data-upload-type="pdf" title="Uplaod PDF File">
    <input type="file" id="file" accept="application/pdf">
    <label for="file">
    <img src="images/upload_pdf_icon.png">
    </label>
</div>

JavaScript

document.querySelectorAll("[data-upload-type").forEach(
    upload_type => {
        upload_type.addEventListener("click",e => {
            let file_type = upload_type.getAttribute("data-upload-type");
            let file_object = document.getElementById("file");

            if(file_type == "pdf"){
                file_object.addEventListener("change",function(e){
                    if(e.target.files){
                        let file = e.target.files[0];
                        pixieBoard.uploadPdf(file);
                }});
              }
        });
    })

和uploadPdf函数

uploadPdf(file){
    var reader = new FileReader();
    var self = this;
    reader.readAsDataURL(file);
    reader.onloadend = function(event) {
        var pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
        var loadingTask = pdfjsLib.getDocument({url:event.target.result})
        loadingTask.promise.then(function(pdf) {
            pdf.getPage(1).then(function(page) {
                var scale = 0.75;
                var viewport = page.getViewport({scale: scale});
                var renderContext = {
                    canvasContext: self.context,viewport: viewport
                };
                page.render(renderContext);
                self.context.clearRect(0,self.whiteboard.width,self.whiteboard.height);
                self.context.beginPath();
            })})}   
        }

有人可以帮我解决这个问题。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

错误1:Request method ‘DELETE‘ not supported 错误还原:...
错误1:启动docker镜像时报错:Error response from daemon:...
错误1:private field ‘xxx‘ is never assigned 按Alt...
报错如下,通过源不能下载,最后警告pip需升级版本 Requirem...