Vue 移动端制作PDF预览

1.首先安装Vue-pdf

2.上级页面做跳转

javascript 复制代码

this.$router.push({
        path: "/preview",
        query: {
          id: item.chapter,
        },
});

3.预览页面代码

javascript 复制代码

<template>
  <div>
    <van-nav-bar title="在线预览" left-text="退出" left-arrow @click-left="onClickLeft" safe-area-inset-top placeholder />
    <div class="commonCenter build_matrix_box">
      <div class="slide-box">
        <div class="slide-box-item" v-for="i in numPages" :key="i">
          <pdf ref="pdf" :src="url" :page="i">
          </pdf>
          <div class="page_num_div">{{ i + " / " + numPages }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pdf from "vue-pdf";
import { environment } from "../../../utils/environment.js";
import { getFileBase64, getFileBase64_1 } from "../../../api/auth.js";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      isIosPhone: false,
      url: null,
      numPages: null,
      displacement: {
        scale: 1,
      },
    };
  },
  mounted() {
    this.getNumPages();
    
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    getDistance(start, stop) {
      // Math.hypot()计算参数的平方根
      return Math.hypot(stop.x - start.x, stop.y - start.y);
    },
    getNumPages() {
      if (
        process.env.NODE_ENV === "development" 
      ) {

        getFileBase64_1(this.$route.query.id)
          .then((res) => {
            console.log("res", res);

            this.url = this.getObjectURL(res);
            console.log("url", this.url);

            let loadingTask = pdf.createLoadingTask(this.url);
            loadingTask.promise
              .then((pdf) => {
                console.log("numPages", pdf.numPages);
                this.numPages = pdf.numPages;
              })
              .catch((err) => {
                console.error("pdf 加载失败", err);
              });
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    // 将返回的流数据转换为url
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        console.log(1);
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        console.log(2);
        // webkit or chrome
        try {
          console.log(3);
          url = window.webkitURL.createObjectURL(file);
          console.log(url);
        } catch (error) {
          url = window.webkitURL.createObjectURL(file);
          console.log(4);
        }
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        console.log(5);
        try {
          console.log(6);
          url = window.URL.createObjectURL(file);
        } catch (error) {
          console.log(7);
        }
      }
      return url;
    },
    //其他文件的兼容 暂未使用
    handlePreview() {
      this.$http
        .post("/away-server/mobile-dc-system/file/base64", {
          fileId: this.$route.query.id,
        })
        .then((res) => {
          if (!res) {
            return;
          }
          switch (fileSuffix) {
            case ".pdf":
              this.$router.push({
                name: "PdfPreview",
                params: {
                  fileUrl: `data:application/pdf;base64,${res}`,
                  fileSuffix,
                },
              });
              break;
            case ".docx":
            case ".doc":
              this.$router.push({
                name: "WordPreview",
                params: {
                  fileUrl: `data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${res}`,
                  fileSuffix,
                },
              });
              break;
            case ".xlsx":
            case ".xls":
              this.$router.push({
                name: "XlsxPreview",
                params: {
                  fileUrl: `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${res}`,
                  fileSuffix,
                },
              });
              break;
            default:
              ImagePreview([`data:image/jpeg;base64,${res}`]);
              break;
          }
        })
        .catch((error) => {
          this.$toast(error);
        });
    },

  },
};
</script>
<style lang="scss" scoped>
::v-deep .van-tab {
  color: #13b599;
  margin: 0 2px;
  border-bottom: 2px solid #d9d9d9 !important;
}

::v-deep .van-tab--active {
  font-weight: 900;
}

::v-deep.van-tab--active {
  font-weight: 900;
}

::v-deep .van-nav-bar__content {
  background: linear-gradient(#61d5a0, #1eb9b8);
}

::v-deep .van-nav-bar__title {
  color: #fff;
}

//修改文字颜色
::v-deep .van-nav-bar__text {
  color: #fff;
}

//修改箭头颜色
::v-deep .van-icon-arrow-left {
  color: #fff !important;
}

::v-deep .van-tabs__line {
  background-color: #1abc9c;
  width: 25%;
  height: 2px;
}

iframe {
  width: 100vw;
  background: #f5f5f9;
  height: calc(100vh - 46px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

iframe::-webkit-scrollbar {
  display: none;
}

.commonCenter {
  padding: 0;
}

.slide-box-item {
  position: relative;
}

.page_num_div {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
  color: #000;
}
</style>