Failed to construct 'Worker': Script at '.......' cannot be accessed from origin 'null'.

[huhai0403]

I use "vue-pdf": "^2.0.3" in the vue spa project。After packing,on the phone, from did not use vue-pdf page(B page) to use vue-pdf page(A page),A page did not execute any code(alert , document.titile='123123'......),and no any DOM.]

when i open the index.html in PC Google Chrome， Failed to construct 'Worker': Script at 'file:///C:/Users/huhai/Desktop/1.0/2a59ae14c7719d1a21eb.worker.js' cannot be accessed from origin 'null'.

[huhai0403]

[huhai0403]

Is the packaging method wrong?

[FranckFreiburger]

In the file pdf.vue

try to replace

if ( process.env.VUE_ENV === 'server' ) {

	var PDFJS = require('pdfjs-dist/build/pdf.js');
	PDFJS.PDFJS.disableWorker = true;
} else {

	var PDFJS = require('pdfjs-dist/webpack.js');
}

with

var PDFJS = require('pdfjs-dist/build/pdf.js');
PDFJS.PDFJS.disableWorker = true;

and compile again

[youngLyz]

got it!! Modify the file in node_modules and compile

[chenxxzhe]

try import the no worker vue file import pdf from 'vue-pdf/src/vuePdfNoSssNoWorker'

[dante2359]

My goal was to exclude the file "[hash] .worker.js" from the root of the project. But, when I tried to use import pdf from 'vue-pdf/src/vuePdfNoSssNoWorker' instead of import pdf from 'vue-pdf/src/vuePdfNoSss' the PDF pages did not render without pdf.worker.

The following configuration helped me. In 'vuePdfNoSss.vue': comment string: // var PdfjsWorker = require('worker-loader!pdfjs-dist/build/pdf.worker.js'); and add to top level: import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.js'

This will allow the custom configuration of 'worker-loader' from 'webpack' (in detail: https://webpack.js.org/loaders/worker-loader/).

And in 'vue.config.js' you need to define rule for 'worker.js' files in chainWebpack(config):

module.exports = {
  
  chainWebpack(config) {    
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader').loader('worker-loader')
      .options(
        {
          inline: true,
          fallback: false
        }
        )
      .end()
  }
}

[chsword]

I encountered the same problem, but the cause of my problem was that I made a CDN site for the js/css files after the build, and the index.html domain did not change.

My final solution is to change the loading method of the pdf.worker.js .

    PDFJS.GlobalWorkerOptions.workerSrc =
      "https://cdn.mydomain.com/pdfjs/2.3.200/pdf.worker.min.js";

[metadeck]

@chsword Where did you add the above code? Thanks

[chsword]

@metadeck vuePdfNoSss.vue

  if (
    typeof window !== "undefined" &&
    "Worker" in window &&
    navigator.appVersion.indexOf("MSIE 10") === -1
  ) {
    PDFJS.GlobalWorkerOptions.workerSrc =
      "https://xxxx.com/pdfjs/2.3.200/pdf.worker.min.js";//I changed the original PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker(); to this
  }

[JakeWoki]

@Dd-ouni 按@dante2359 的做法可以

[pupa91]

@Dd-ouni 按@dante2359 的做法可以

@JakeWoki 好的，JakeWoki，谢谢！

[oneMoreTime1357]

My goal was to exclude the file "[hash] .worker.js" from the root of the project. But, when I tried to use import pdf from 'vue-pdf/src/vuePdfNoSssNoWorker' instead of import pdf from 'vue-pdf/src/vuePdfNoSss' the PDF pages did not render without pdf.worker.

The following configuration helped me. In 'vuePdfNoSss.vue': comment string: // var PdfjsWorker = require('worker-loader!pdfjs-dist/build/pdf.worker.js'); and add to top level: import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.js'

This will allow the custom configuration of 'worker-loader' from 'webpack' (in detail: https://webpack.js.org/loaders/worker-loader/).

And in 'vue.config.js' you need to define rule for 'worker.js' files in chainWebpack(config):

module.exports = {
  
  chainWebpack(config) {    
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader').loader('worker-loader')
      .options(
        {
          inline: true,
          fallback: false
        }
        )
      .end()
  }
}

use this need worker-loader 2.0.0

[pupa91]

use this need worker-loader 2.0.0

[zhanfeng-z]

My goal was to exclude the file "[hash] .worker.js" from the root of the project. But, when I tried to use import pdf from 'vue-pdf/src/vuePdfNoSssNoWorker' instead of import pdf from 'vue-pdf/src/vuePdfNoSss' the PDF pages did not render without pdf.worker.

The following configuration helped me. In 'vuePdfNoSss.vue': comment string: // var PdfjsWorker = require('worker-loader!pdfjs-dist/build/pdf.worker.js'); and add to top level: import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.js'

This will allow the custom configuration of 'worker-loader' from 'webpack' (in detail: https://webpack.js.org/loaders/worker-loader/).

And in 'vue.config.js' you need to define rule for 'worker.js' files in chainWebpack(config):

module.exports = {
  
  chainWebpack(config) {    
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader').loader('worker-loader')
      .options(
        {
          inline: true,
          fallback: false
        }
        )
      .end()
  }
}

Unfortunately, IE11 not work. I solve the problem by changing import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.js' to import PdfjsWorker from 'pdfjs-dist/es5/build/pdf.worker.js'.