Vue-pdf打包线上控制台work.js404,pdf线上无法预览,本地正常

引言

维护公司之前的一个项目,使用了vue-pdf插件,本地效果正常,打包线上之后控制台提示一个work.js资源引用404

问题已解决,下面介绍埋坑的几个要点位置

.vue组件内部是这样引入的

tempalte模板部分:
<tempalte>
 <pdf :src="pdfUrl" ref="pdf"></pdf>
</tempalte>

script部分:
<script>
import pdf from 'vue-pdf';
export default {
  components: {
    pdf,
  },
  .....
}
</script>

这样使用在本地是没有问题的,可以预览,但是打包后预览404,我们需要改动一下vue-pdf插件的配置

首先在你的node_modules依赖里,找到如下文件夹的文件

更改里面的内容,

 

主要更改的地方有两处,第一处框起来的部分是新增内容,第二处框起来的是修改部分,把它注释掉就行了。

然后在vue项目的配置文件config.js添加内部webpack配置

chainWebpack: (config) => {
    .... 

    // 处理vue-pdf打包文件404
    config.module
    .rule('worker')
    .test(/\.worker\.js$/)
    .use('worker-loader').loader('worker-loader')
    .options({
        inline: true,
        fallback: false,
    }).end();

}

,这样打包的时候,你的vuepdf就不会打包workjs404了。

当然,还有其它方式,网上看到有的网友博客中提到work.js404的原因是文件路径问题,将此文件放入webapp项目文件夹的static静态文件夹目录下面即可,不过我没有尝试过,所以不是很清楚,这里的方式是我已经在实际项目中处理解决了的,希望对你有帮助.

 

 

 

`vue-pdf` 组件的 `src` 属性只能接受字符串类型的 URL,因此无法直接加载 `pdfjs-dist` 的 `createLoadingTask` 方法返回的 PDF 数据。 如果想要使用 `src` 属性加载 `pdfjs-dist` 的 `createLoadingTask` 方法返回的 PDF 数据,可以将该数据先转换成 Data URL,然后将 Data URL 作为 `src` 属性的值,示例代码如下: ```javascript import { createLoadingTask } from 'pdfjs-dist'; import VuePdf from 'vue-pdf'; // 创建加载 PDF 数据的 Promise 对象 const loadingTask = createLoadingTask('https://example.com/path/to/pdf'); // 等待加载完成 loadingTask.promise.then(typedArray => { // 将 TypedArray 对象转换成 Data URL const dataUrl = `data:application/pdf;base64,${btoa(String.fromCharCode(...new Uint8Array(typedArray)))}`; // 将 Data URL 作为 src 属性的值 new Vue({ el: '#app', components: { VuePdf, }, template: '<vue-pdf :src="pdfUrl"></vue-pdf>', data() { return { pdfUrl: dataUrl, }; }, }); }); ``` 在上面的示例中,我们使用 `createLoadingTask` 方法创建了一个加载 PDF 数据的 Promise 对象,然后等待加载完成。一旦加载完成,我们将 TypedArray 对象转换成 Data URL,并将其作为 `src` 属性的值传递给 vue-pdf 组件以进行显示。注意,这里我们使用了 `btoa` 方法将 TypedArray 对象转换成字符串,然后使用 `String.fromCharCode` 方法将字符串转换成 Unicode 编码的字符数组,最终将字符数组传递给 `Uint8Array` 构造函数以创建 TypedArray 对象。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杀猪刀-墨林

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值