vue或uniapp使用pdf.js预览

这篇具有很好参考价值的文章主要介绍了vue或uniapp使用pdf.js预览。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、先下载稳定版的pdf.js,可以去官网下载  官网下载地址  或  pdf.js包下载(已配置好,无需修改)

二、下载好的pdf.js文件放在public下静态文件里, uniapp是放在 static下静态文件里

三、使用方式

   1. vue项目 注意路径 :src="`static/pdfjs-1.9/web/viewer.html?file=你的pdf路径
<iframe :src="`static/pdfjs-1.9/web/viewer.html?file=https://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf`" style="border:none;" width="1000" height="100%"></iframe>
 2. uniapp项目使用 注意路径  /static/PDFVIEW/pdfjs-1.9/web/viewer.html
<template>
    <view style="width: 100vh;">
        <web-view :src="pdfUrl" :fullscreen="true"></web-view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            pdfUrl: '',
            htmlUrl: '/static/PDFVIEW/pdfjs-1.9/web/viewer.html', //新测试预览
     fileUrl:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',  
        }
    },
    onLoad(options) {
        this.pdfUrl = `${this.htmlUrl}?file=${this.fileUrl}`;
    }
}
</script>

四、控制台会出现跨域问题,这时候要注释跨域代码,

    在viewer.js文件找到这段代码,(在1861行)然后注释掉
 var fileOrigin = new URL(file, window.location.href).origin;
 if (fileOrigin !== viewerOrigin) {
   throw new Error('file origin does not match viewer\'s');
 }

五、这时候基本就能看了


pc端效果

vue或uniapp使用pdf.js预览,# Vue3.0+,# Vue2.6+,# uni-app,javascript,vue.js,uni-app

手机端效果 

 vue或uniapp使用pdf.js预览,# Vue3.0+,# Vue2.6+,# uni-app,javascript,vue.js,uni-app

vue或uniapp使用pdf.js预览,# Vue3.0+,# Vue2.6+,# uni-app,javascript,vue.js,uni-app文章来源地址https://www.toymoban.com/news/detail-637616.html

到了这里,关于vue或uniapp使用pdf.js预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3管理系统中后台返回pdf格式的文件流,前端如何预览?以及uniapp微信小程序中后台返回的base64位的pdf文件如何预览?

    后台返回的是base64格式的pdf文件,首先需要解析base64文件的插件 image-tools 1 安装并引入插件 2 封装预览pdf的函数 3 调用接口获取数据

    2024年01月18日
    浏览(93)
  • Vue中使用pdf.js实现在线预览pdf文件流

    以下是在Vue中使用pdf.js实现在线预览pdf文件流的步骤: 在需要使用的组件中,使用以下代码引入pdf.js: 使用pdf.js的 getDocument() 方法加载pdf文件流。可以将文件流作为Blob对象传递给该方法。例如,可以使用axios从服务器获取pdf文件流: 在 loadPdf() 方法中,使用 getDocument() 方法

    2024年02月09日
    浏览(71)
  • uniapp使用addInterceptor路由拦截(vue2 OR vue3)

    说明 初始版本方法,可能因为能力原因存在不足,请见谅,有问题评论区~~ 主要通过 uni.addInterceptor api进行路由拦截 目前小程序上面对于uniapp提供的路由跳转方式可以实现拦截,自带的返回按钮,底部tabbar切换无法拦截他们的跳转,但是可以监听到to和from h5支持路由全部拦截

    2024年02月09日
    浏览(45)
  • vue2实现二进制流pdf浏览器预览功能

    该方法不需要使用插件  获取后端二进制文件流后直接处理 然后点击调用方法使用

    2024年01月20日
    浏览(64)
  • uniapp中使用pinia (针对于uniapp创建vue3项目,uniapp创建vue2项目此方法不可用)

    如果新建项目,先初始化一下 名字自己定我的是pinia-store,在目录下新建index.js和login.js,代码如下 index.js 这是需要被main.js引用的 如同与vue3项目中index.ts中引入的pinia 再建一个存储状态的文件(login.js) 4 main.js中的修改 在vue组件中就可以操作pinia中存储的状态的和一系列操作了

    2024年02月11日
    浏览(73)
  • Vue3PDF预览(vue3-pdf-app)

    vue3-pdf-app 插件 网站预览PDF最佳且最简单的方式: 如果需要自定义网页内预览,可以采用本PDF预览组件(PDFViewer.vue) 本组件基于  vue3-pdf-app@1.0.3  插件进行二次封装,更适合日常使用需要! 插件支持功能包括但不限于:缩放、旋转、全屏预览、打印、下载、内容检索、dar

    2023年04月21日
    浏览(39)
  • 【vue2】纯前端实现本地的pdf/word/epub文件预览

    需求是预览本地的pdf/word/epub格式的文件,但是搜索后发现没有可以直接使用的,格式不同,显示的方式和效果也都略有不同。 最后还是 分别实现预览 的功能。 如果只需要预览pdf/word等格式的话,可以使用的方案:vue-office,支持多种文件(docx、excel、pdf)预览的vue组件库,支持

    2024年02月11日
    浏览(76)
  • vue2 pdfjs-2.8.335-dist pdf文件在线预览功能

    1、首先先将 pdfjs-2.8.335-dist 文件夹从网上搜索下载,复制到public文件夹下. 2、在components下新建组件PdfViewer.vue文件 3、在el-upload 中调用 pdf-viewer 组件 4、在el-upload 中的 on-preview方法中加上对应的src路径  internalPreview(file) { //判断需要预览的地方加 props—pdfView                

    2024年01月19日
    浏览(48)
  • vue3移动端实现pdf预览

    使用的插件有: html部分: js部分: 我一开始使用的时第一种方法,然后测试之后发现 苹果手机会显示pdf加载出错了 ,安卓手机可以正常显示,于是换成了第二种方法。 html部分: js部分: 用了第二种插件后,苹果手机还是加载不出来,后面查到因为pdfjs-dist有时候会出现部

    2024年02月02日
    浏览(52)
  • Vue3前端h5移动端页面预览PDF使用pdfjs-dist,添加自定义文本水印

    pnpm i pdfjs-dist@2.5.207

    2024年01月18日
    浏览(77)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包