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

由于微信中苹果限制，是无法保存下载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=this
                        let 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.response
                                that.showPdf(that.file)
                            }
                        };
                        xhr.send();
                    },
                    openPage(pdfFile, pageNumber, context) {
                        var scale = 2;
                        let that=this
                        pdfFile.getPage(pageNumber).then(function (page) {
                            viewport = page.getViewport(scale); // reference canvas via context
                            var canvas = context.canvas;
                            canvas.width = viewport.width;
                            canvas.height = viewport.height;
                            // 记录当前canvas的width，height
                            window.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=this
                        reader.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);
                                    }
                                }
                            });
                        };
                    },```