vue框架实现pdf在线预览

最新推荐文章于 2024-05-13 15:52:19 发布
最新推荐文章于 2024-05-13 15:52:19 发布
阅读量585 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34035425/article/details/114393582
版权

记录下实现pdf预览展示的坑，刚开始使用vue-pdf在本地运行是可以展示的，但是发布测试环境展示不出来
报以下错误：
在这里插入图片描述

网上找的的是：
网上搜到的解决方法
但是我看半天不知道怎么解决，然后换pdfjs-dist插件

安装

npm install pdfjs-dist --save

引入

import PDFJS from "pdfjs-dist";
console.log(PDFJS)  //undefined

打印PDFJS返回undefiend

在这里插入图片描述

最低0.47元/天 解锁文章
Jqlender
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何通过vue3和vite实现在线预览pdf功能，供大家学习研究参考
11-16
} function pageZoomIn() { if (state.scale > 0.8) { state.scale -= 0.1; } } onMounted(() => { pdfjsLib.GlobalWorkerOptions.workerSrc = "./pdf.worker.js"; const loadingTask = pdfjsLib.getDocument(state.source); loadingTask.promise.then((pdf) => { state.numPages = pdf.numPages; }); }); </script> <style lang="css" scoped> .pdf-preview { position: fixed; height: 100vh; width: 100vw; padding: 20px 0; box-sizing: border-box; background-c
Vue 报错 SyntaxError: Unexpected token ‘=‘ at Object../node_modules/pdfjs-dist/build/pdf.js
weixin_46061554的博客
08-25 1550
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
vue预览PDF文件的几种方法
weixin_58495461的博客
05-13 1956
2.3 使用组件展示PDF文件。1.1页面结构 html。2.2 注册并引入组件。
onlyoffice+vue实现在线预览在线编辑
热门推荐
X_WZJ的博客
04-11 2万+
vue整合onlyOffice实现文档在线预览编辑
Vue2+Element+Onlyoffice实现文档在线预览
qq_45086494的博客
01-20 3243
Vue2+Element+Onlyoffice实现文档在线预览
【vue2+onlyoffice】word在线编辑&保存&下载
记录
06-13 7671
需要实现word文档的编辑和保存功能，之前写了一篇选方案的。现在就按照onlyoffice开始实现。【没有使用到多人协同】
vue在线预览PDF
weixin_42346984的博客
04-28 445
一、引入pdfjs-dist、axios包 npm i pdfjs-dist axios --save 二、pdfViewer组件 <template> <div class="pdf-viewer" tabIndex="1" > <!-- <div class="position page"> <span class="span_1" @click="pageUp" &
vue 使用 vue-pdf 实现pdf在线预览的示例代码
11-21
在 Vue 中实现 PDF 在线预览功能，我们可以借助专门的库 `vue-pdf`。这篇笔记将详细介绍如何使用 `vue-pdf` 来实现在 Vue 应用中预览 PDF 文件，并解决一些常见问题。 首先，要安装 `vue-pdf`，在命令行中运行以下...
vue3.0pdf在线预览
02-25
其次，Vue3.0的Suspense组件提供了对异步组件的原生支持，这对于PDF预览尤其有用，因为通常我们需要等待PDF文件加载完成才能显示。我们可以在Suspense组件中延迟加载PDF预览组件，同时显示一个加载指示器，提升用户...
java用插件pdf.js实现pdf在线预览
最新发布
06-28
java用插件pdf.js实现pdf在线预览（非下载），jeecgboot vue2 框架背景，亲测有效，有问题可联系
SpringBoot在线预览PDF文件
04-25
本项目的核心是实现PDF在线预览功能，它利用了SpringBoot的Web服务特性，结合PDF.js库来实现在浏览器中预览PDF文件。 首先，我们需要理解SpringBoot的Web开发基础。SpringBoot内置了对HTTP请求处理的支持，通过创建...
iframe标签实现pdf预览功能
05-29
综上所述，`iframe`标签是一种简单易用的方法，适用于在Vue和React项目中实现PDF预览功能。通过封装组件，我们可以将预览逻辑复用在多个地方，提升代码的可维护性和一致性。在实际应用中，根据项目需求和性能考虑，...
vue整合onlyOffice实现文档在线预览编辑
weixin_59213769的博客
01-16 2891
vue整合onlyOffice实现文档在线预览编辑
vue onlyoffice在线编辑与预览，文件无法保存问题，始终打开同一文件的问题
m0_46978096的博客
12-18 1970
【代码】vue onlyoffice在线编辑与预览，文件无法保存问题，始终打开同一文件的问题。
前端vue基于onlyoffice实现在线预览
xieshengnanQ的博客
04-26 5432
html <div id="placeholder" @click="xianshi" class="nav">在线预览 </div> js xianshi() { new DocsAPI.DocEditor("placeholder", { document: { key: null, title: "pdf", // "url": "http://www.sqber.com/1.xlsx", url:放你需
Vue 预览word,excel,ppt等office文档-内网访问（基于onlyoffice，后端返回文件流）
nihaoweixiao1的博客
12-24 1万+
Vue 预览word,excel,ppt等office文档-内网访问（基于onlyoffice，后端返回文件流
vue项目实现常见的三种文件类型在线预览（pdf/word文件excel表格）
weixin_52103939的博客
01-12 2万+
之前做PDF预览一直用的pdf.js，这次想需求们那么多想简化下，决定用vue-pdf这个组件，虽然说它没有原生那样强大，但已经满足常用的需求了，重要是这个组件使用简单。下面我们直接进入正题！ 一、安装vue-pdf npm install --save vue-pdf 二、在需要的页面注册 <script> import PDF from 'vue-pdf' export default { components:{ PDF, }, data(){ re
vue中预览pdf
蜗牛~~
07-18 1万+
如果后端返回的pdf地址，粘贴到浏览器的url框中，可以在浏览器中直接进行预览的，那么我们就用window.open，或 a标签，或iframe标签通过设置src进行预览即可。可以直接使用window.open（'获取到的pdf地址'）重新打开一个浏览器页签。通过浏览器页签直接实现预览功能（预览页面的样式，根据浏览器的不同，会略有差异），这种情况，上述方法解决不了，需要使用插件或者设置浏览器请求头的方式来解决。后端返回了服务器文件pdf的地址，粘贴到浏览器的url框中，单页pdf可以直接使用。
vue3实现预览pdf文件功能
04-25
Vue3是一种流行的JavaScript框架，用于构建用户界面。要实现预览PDF文件的功能，可以使用Vue3结合一些其他库来实现。以下是一种可能的实现方式： 1. 首先，你需要引入一个用于处理PDF文件的JavaScript库，比如pdf.js。你可以使用npm或者yarn来安装该库。 2. 在Vue3中，你可以创建一个组件来处理PDF文件的预览。在该组件中，你可以使用pdf.js库来加载和渲染PDF文件。 3. 在组件中，你可以使用Vue3的生命周期钩子函数来在组件加载时加载PDF文件。你可以在`mounted`钩子函数中调用pdf.js库的API来加载PDF文件。 4. 一旦PDF文件加载完成，你可以使用pdf.js库提供的API来渲染PDF文件。你可以创建一个canvas元素，并将其作为PDF文件的容器。 5. 接下来，你可以使用pdf.js库提供的API来渲染PDF页面。你可以通过调用`pdf.getPage(pageNumber)`方法来获取指定页码的页面对象，并将其渲染到canvas元素上。 6. 为了实现预览功能，你可以在组件中添加一些控制按钮，比如上一页和下一页按钮。当用户点击这些按钮时，你可以调用pdf.js库提供的API来切换页面，并重新渲染到canvas元素上。 7. 最后，你可以在Vue3组件中使用`<canvas>`标签来显示渲染后的PDF文件。你可以使用Vue3的数据绑定来控制canvas元素的显示和隐藏。 这是一个简单的实现预览PDF文件功能的方法。当然，具体的实现方式可能会因为你的需求和使用的库而有所不同。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值