uniapp移动端实现pdf预览

需要下载pdfjs

官网下载地址
https://mozilla.github.io/pdf.js/getting_started/#download

第一步
将文件放在static文件下
在这里插入,

修改源代码
1 pdf.js是不支持跨域文件加载的直接加载是不会成功的。会报 “file origin doesnot match viewer”错误。所以我们得改变一下源码。把下面图片上的三行注释掉。

2.如果我们的pdf需要在本地获取或者是文件服务器获取，我们就将这里直接去空。

<template>
<!--直接在新页面打开预览 --><!-- <view style="width: 100%;" ><web-view  :src="allUrl" class="pdfClass"></web-view>                 </view> --><!--如果是在已有的页面内插入 --><iframewidth="100%"height="500"scrolling="no":src="allUrl"></iframe>
</template><script>export default {data() {return {src: '',allUrl:'',viewerUrl: '/static/pdfjs/web/viewer.html', // 格式化文件流的一个js 文件 }},onLoad(options) {let fileUrl = encodeURIComponent("pdf文件") // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。this.allUrl = this.viewerUrl + '?file=' + fileUrl}}
</script><style></style>

uniapp移动端实现pdf预览相关推荐

uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...
实现Vue移动端的PDF预览
最近做到一个功能,PDF预览:这个功能看着蛮简单的,结果搞了两个下午,真是欲哭无泪.记录一下所查到的预览方法. 我在网上找了蛮多教程的,大致都是以下几个方法实现预览: 使用 iframe 标签使用 ...
移动端和PC端的pdf预览与下载
34.移动端和PC端的pdf的预览与下载 1.预览需求:在手机端实现pdf的文件与下载,主要是zlb_app中实现过程:在研究了vue-pdf.pdfjs.pdfh5之后,选择了vue-pdf-s ...
uniapp App端实现pdf文件预览
一.直接使用插件市场的PDF插件刚开始还是在浏览器上测试的,完全没问题,可是打包安装之后就不行了,PDF显示不出来,其他的文件可以显示,比如Word文档,然后客户必须要PDF,所以这就没啥用了.然后 ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
uni-app实现PDF预览功能（避坑看这）
目录前言一.下载PDF预览相关文件二.使用步骤前言去年就想写一篇关于uni-app的pdf预览功能,拖很久了,补上. 一.下载PDF预览相关文件下载地址解压后效果: 二.使用步骤在 ...
PDF 预览和下载你是怎么实现的？
在开发过程中要求对 PDF 类型的发票提供预览和下载功能,**PDF** 类型文件的来源又包括 H5 移动端和 **PC 端**,而针对这两个不同端的处理会有些许不同,下文会有所提及. 针对 ...
Android PDF原生实现 PDF阅读、PDF手势伸缩、PDF目录、PDF预览缩略图 PDF方案选择 google doc android-pdfview mupdf pdf.js x5
##1.背景近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开 ...
前端实现 PDF 预览的常见方案
前端实现 PDF 预览的常见方案由于在搭建个人博客时,想实现在线预览 pdf 格式的个人简历,经过查阅大致有三大类实现方案:本文共涉及以下 5 种实现方案,如下所示: 使用 HTML 标签 ifra ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...

uniapp移动端实现pdf预览

uniapp移动端实现pdf预览相关推荐

最新文章

热门文章