nuxt整合vue-pdf插件和使用createLoadingTask方法进行分页

2024-05-12 04:57:04

1.背景

目前需要做一个展示pdf功能的需求，所以想到了使用vue-pdf插件，该插件在vue-cli中很好使用，不会出现啥问题，但是放到nuxt项目中就会出现一些问题

2.整合

1.官网地址：https://www.npmjs.com/package/vue-pdf

cnpm install --save vue-pdf

2.写插件js，放到plugins目录下

import Vue from 'vue'
import pdf from 'vue-pdf'
Vue.component('pdf', pdf)

3.nuxt.config.js中添加该js

 plugins: [{ src: '~/plugins/pdf.js', ssr: false }]

4.最重要的一步，要在nuxt.config.js的build的属性下加下面一段代码，如果不加，那么使用<pdf>标签会报错，就算你在.vue文件中使用 import pdf from 'vue-pdf'直接导入,依然会报错

build: {extend(config, ctx) {config.output.globalObject = 'this'config.module.rules.push({test: /\.pdf$/,loader: 'url-loader'})}
}

到这里，基本的功能都可以使用了，使用pdf标签也不会报错了，但是使用pdf的分页功能依然会报错

3.pdf分页

当pdf有多页时，就需要使用pdf的分页功能，否则你只能看到pdf的第一页

那么在官方文档上面使用是如下使用的：

import pdf from 'vue-pdf'var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');

但是这里在nuxt项目中就会出现问题了，只要你在script中使用import pdf fom 'vue-pdf'或者require都会报错，大致的错误也不是很能看懂，但是好像是因为服务端的原因，导致有些东西引不进去。所以我们需要将导入的操作放到客户端做：即在created的process.client环境下或者是mounted下：

<pdf :src="src"  v-for="i in numPages":key="i":page="i"></pdf>data () {return {numPages: 0,src: '',vuePdf: null}
},
created() {if (process.client) {this.vuePdf = require('vue-pdf')this.pdfLoadTask()}
},
methods:{pdfLoadTask () {this.src = this.vuePdf.default.createLoadingTask("这里填pdf的url地址或者本地文件地址")this.src.then(pdf => {this.numPages = pdf.numPages;})}

这样就可以使用createLoadingTask方法来加载pdf了

nuxt整合vue-pdf插件和使用createLoadingTask方法进行分页相关推荐

实用VUE 开发插件！！前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
好用的vue组件插件及框架
实用的vue插件大汇总 Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总 ...
vue周边插件大全，收藏
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
vue 常用插件集合（最全）
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
vue常用插件，可自定义选择。vue demo
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
made with vue.jsvue 插件集合
目录来源与segmentfault UI 更多查看:https://madewithvuejs.com/?page=1 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例来源与s ...
springboot整合vue小试牛刀
序本文主要研究一下如何在springboot工程整合vue maven <dependency><groupId>org.springframework.boot</g ...
分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）
想写一个很普通的那种像word文档样式的table,发现网上很多都是什么教程,没有合适的,我只想要一个拿来就能用的html的table(非专业前端),没有什么别的依赖,而且样式要很普通的简单的表格.既 ...
Vue PDF文件预览打印vue-pdf
Vue PDF文件预览vue-pdf 最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,G ...
html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面
1.项目简介 Nuxt.js是目前比较热门的服务端渲染SSR框架.凭借其更好的SEO.更快的内容到达时间(*首屏渲染速度快*) 加之基于Vue.js技术开发,更易于上手,获得了很多技术开发者的青睐. ...

最新文章

热门文章