cdd-pdf-viewdocumentportal这个组件库是基于pdf-dist库,可以将pdf文件解析成图片,放到指定的容器dom中。props:file:File文件对象url:stringurl可以是下载pdf的路径,该组件可以自动下载并解析pdf。文件数据url,可以直接将数据url解析成要预览的图片。将pdf文件解析为图像以供预览的库。如果pdf包含多页,可以解析成多张图片。开始安装setupnpminstallcdd-pdf-view````##usageuseage全局注册组件eg:importVuefrom'vue'importpdfViewfrom'cdd-pdf-view'Vue.use(pdfView)//after'cdd-pdf-vue的全局组件可以使用了。##自定义组件导入名称/*如果要自定义pdf的名称,则使用Vue.use(pdfView,{name:'pdf-view'})该方法全局注册为pdf-view名称*/Vue.use(pdfView,{name:'pdf-view'})##非全局注册如果在x.vue文件中使用该组件,直接导入即可作为普通组件使用。##浏览器使用1.导入dist/cddPdfVue.css。2.在浏览器中,先导入vue,再导入dist/cddPdfVue.umd.min.js,会自动注册到全局。Name:'cdd-pdf-view'如何使用可以详细了解js模块的定义和用法。这个vue插件对外输出两个元素1.cddPdfView组件CddPdf(老的叫PdfView)两种使用场景1.傻瓜式的使用场景,就是使用组件,直接注册,然后使用全局组件将pdf下载传递给组件连接就足够了。组件有两个prop(属性)文件,pdf文件,可以用来浏览本地pdf文件,使用input标签获取本地文件。它还可以用于从服务器获取pdf文件,然后进行预览。url,这个组件集成了从网上下载的功能,直接传下载链接就可以下载预览了。注意:url属性必须是未经许可的下载链接。如果有权限需求,建议自己下载形成文件,然后传给文件属性。缺点:自行调整样式比较麻烦。2.使用CddPdf类。这个类有一个getPdf静态方法。输入参数可以参考npm。此函数返回一个承诺对象。必须等到promise对象执行完,才能得到一张解析完全的图片,然后用图片显示在页面上。.我们公司最近用pdf例子import{CddPdf}from'cdd-pdf-view'asyncinitPdf(){if(!this.$user.isLogin)returnconstpdfUrls=newMap([[1,awaitimport('@/assets/files/test1.pdf')],[2,等待导入('@/assets/files/test2.pdf')],[3,等待导入('@/assets/files/test3.pdf')],[4,awaitimport('@/assets/files/test4.pdf')]])this.loading=trueCddPdf.GetPdf({url:pdfUrls.get(+this.infoIndex)}).then((res)=>{this.pdfImags=res.imgs.slice(0)}).finally(()=>{this.loading=false})}
