Failed to construct 'Worker': Script at '.......' cannot be accessed from origin 'null'. about vue-pdf HOT 14 OPEN

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

from vue-pdf.

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

from vue-pdf.

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()
  }
}

from vue-pdf.

@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
  }

from vue-pdf.

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

from vue-pdf.

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

from vue-pdf.

from vue-pdf.

Is the packaging method wrong?

from vue-pdf.

got it!!
Modify the file in node_modules and compile

from vue-pdf.

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";

from vue-pdf.

@chsword Where did you add the above code? Thanks

from vue-pdf.

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

@JakeWoki 好的，JakeWoki，谢谢！

from vue-pdf.

use this need worker-loader 2.0.0

from vue-pdf.

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'.

from vue-pdf.