欢迎点击: 个人官网博客

移动端预览PDF及转化为图片保存

一、iframe标签预览pdf
二、vue-pdf 预览pdf(可自行封装弹出等效果)
- 1.下载依赖包
- 2.组件封装
- - 2.1上下滑动式
  - 2.2分页式
三、pdf.js(可预览可下载) 将pdf--->canvas--->图片

由于微信中苹果限制，是无法保存下载pdf文件的(除非后端处理)，安卓可以（会自动跳转到系统自带浏览器下载）。但是为了让用户能保存pdf，就只有改需求将其转化为图片，图片在微信是不受限制可以保存的。

一、iframe标签预览pdf

<iframe src="/index.pdf" width="100%" height="100%">This browser does not support PDFs. Please download the PDF to view it:
</iframe>

缺点：
1.在移动端上显示时不能全部展示完全
2.iframe在iPhone上宽度被撑开
3.iframe在iPhone上滚动条失效
…等等一系列问题(不推荐)

二、vue-pdf 预览pdf(可自行封装弹出等效果)

1.下载依赖包

npm install --sava vue-pdf

2.组件封装

2.1上下滑动式

预览：

当pdf文件比较大的时候，加载比较慢，可以适当加loading或骨架屏增加用户体验

<template><div class="m-area"><p class="u-title">电子合同签署</p><pdf v-for="index in numPages" :key="index" :src="pdfUrl" :page="index" /><button type="button" class="u-button" >同意签署</button></div>
</template><script>
import pdf from "vue-pdf"; // 引入pdf组件
export default {components: { pdf }, // 引入pdf组件data() {return {loaded: false,numPages: "",pdfUrl:''//pdf文件路径，记住如果是本地pdf文件,pdf放在public文件夹下，否则路径报错};},created() {document.body.style.background = "#FFFFFF";document.body.style.margin = 0;// 同时设置html和body元素，禁用其横向滚动条// docEl.style.overflowX = 'hidden'document.body.style.overflowX = 'hidden'this.loadPdf();},methods: {// 上下滚动pdf加载loadPdf() {this.pdfUrl = pdf.createLoadingTask(this.pdfUrl);this.pdfUrl.promise.then((pdf) => {this.$nextTick(() => {this.numPages = pdf.numPages; // pdf总页数this.loaded = true;});});},},
};
</script>

2.2分页式

组件代码比较长：可自行下载查看
demo代码

三、pdf.js(可预览可下载) 将pdf—>canvas—>图片

核心文件为pdf.min.js,pdf.worker.min.js,一个负责API解析，一个负责核心解析。

  <script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.0.95/pdf.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.0.95/pdf.worker.min.js"></script>

html:

<div id="imgDiv" style="display: none;"></div>
<img style="width: 100%;" v-bind:src="imgUrl" ref='aaa' alt="">

js:

                 urlToBlob() {let that=thislet file_url ='./a.pdf'let xhr = new XMLHttpRequest();xhr.open("get", file_url, true);xhr.responseType = "blob";xhr.onload = function () {if (this.status == 200) {that.file=this.responsethat.showPdf(that.file)}};xhr.send();},openPage(pdfFile, pageNumber, context) {var scale = 2;let that=thispdfFile.getPage(pageNumber).then(function (page) {viewport = page.getViewport(scale); // reference canvas via contextvar canvas = context.canvas;canvas.width = viewport.width;canvas.height = viewport.height;// 记录当前canvas的width，heightwindow.wi = canvas.width;window.he = canvas.height;canvas.style.width = "100%";canvas.style.height = "100%";var renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);//setTimeout(()=>{// that.imgUrl=canvas.toDataURL("image/png");// },500)});return;},showPdf(files) {/*pdf.js无法直接打开本地文件,所以利用FileReader转换*/var reader = new FileReader();reader.readAsArrayBuffer(files);let that=thisreader.onload = function (e) {var myData = new Uint8Array(e.target.result)var docInitParams = {data: myData};var typedarray = new Uint8Array(this.result);PDFJS.cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/';PDFJS.cMapPacked = true;PDFJS.getDocument(typedarray).then(function (pdf) { //PDF转换为canvas$("#imgDiv").css("border", "0"); //清除文本、边框if (pdf) {window.pageNum = pdf.numPages;$("#pagesText").text(pageNum);for (var i = 1; i <= pageNum; i++) {var canvas = document.createElement('canvas');canvas.id = "pageNum" + i;$("#imgDiv").append(canvas);var context = canvas.getContext('2d');that.openPage(pdf, i, context);}}});};},```

移动端预览PDF及转成图片保存相关推荐

PDF文件转成图片保存
最新版访问:https://blog.csdn.net/wmf_helloWorld/article/details/107105353 1.根据文件路径获取文件,并将PDF文件的每一页转换为一个图片 ...
移动端预览PDF插件
本插件基于pdf.js和jquery 需要引入指定的js文件 1.pdf.js 2.pdf.worker.js 3.pdfh5.js 4.pdfh5.css 建议先引入jquery文件再引入上述文件 ...
使用pdf.js在移动端预览pdf文档
pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...
h5,移动端预览pdf文件，使用pdfh5插件
苹果机是可以直接打开一个 pdf的网络路径进行预览的问题是安卓直接打开的话就跳转到下载页面或者那个大哥可以找一个h5 页面可以预览word文档 (其实吧也可以只要你愿意花钱还是能 ...
vue 手机移动端预览pdf
最新需求是在手机实现pdf的预览,最终采用的是pdfh5,可以保存为图片,比较方便首先pdf返回的是pdf文件流接收pdf文件流的时候需要设定文件类型responseType: 'arraybuf ...
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...
uni-app移动端-H5-微信小程序在线预览pdf，图片，视频
封装了一个插件,可直接导入hbuilderx查看使用: 插件地址:uni-app移动端-H5-微信小程序在线预览pdf,图片,视频 <template><view class=&qu ...
UNI-APP开发在线预览PDF（ios，安卓，H5端亲测有效）
插件地址 (如果出现空白,检查自己的pdf链接---我这边的测试链接,不一定哪天无效了https://pinshushu.zyrkeji.cn/uploads/20230406170306d8cf55 ...
移动端H5+vue使用vue-pdf在线预览PDF
需求是点击查看收据按钮,进入新页面直接显示收据,可以放大.缩小.旋转.下载,没有分页 1.安装 npm i vue-pdf --save 2.使用 <template><div &g ...
网页嵌入pdf、在线预览pdf工具及插件（转）
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

移动端预览PDF及转成图片保存

移动端预览PDF及转化为图片保存

一、iframe标签预览pdf

二、vue-pdf 预览pdf(可自行封装弹出等效果)

1.下载依赖包

2.组件封装

2.1上下滑动式

2.2分页式

三、pdf.js(可预览可下载) 将pdf—>canvas—>图片

移动端预览PDF及转成图片保存相关推荐

最新文章

热门文章