标签：ctx width let 使用 pdf pdfJS pdfScale viewport

pdfJS的使用

• • 版本是 "pdfjs-dist": "2.5.207",
  • npm i pdfjs-dist

版本是 “pdfjs-dist”: “2.5.207”,

npm i pdfjs-dist

<template>
  <div class="details">
    <div class="home_wrap">
      <div class="pdf_down">
        <div class="pdf_set_left" @click="scaleD()">放大</div>
        <div class="pdf_set_middle" @click="scaleX()">缩小</div>
      </div>
    </div>
  </div>
</template>
<script>
const PDFJS = require("pdfjs-dist");
PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js");
export default {
  data() {
    return {
      pdfScale: null, //pdf放大系数
      // pdfScale: 0.6, //pdf放大系数
      pdfPages: [],
      pdf_div_width: "",
      pdfSrc: null,
      initScale: 0,
    };
  },
  components: {},
  methods: {
    scaleD() {
      //放大
      this.initScale = 1;
      let max = 0;
      if (window.screen.width > 375) {
        max = 1.5;
      } else {
        max = 1.2;
      }
      if (this.pdfScale >= max) {
        return;
      }
      this.pdfScale = this.pdfScale + 0.1;
      this.loadFile(this.pdfSrc);
    },
    scaleX() {
      //缩小
      this.initScale = 1;
      let min = 0.3;
      if (this.pdfScale <= min) {
        return;
      }
      this.pdfScale = this.pdfScale - 0.1;
      this.loadFile(this.pdfSrc);
    },
    getPdfurl() {
      //获得pdf教案
      //加载本地
      this.pdfSrc =
        "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/activity/onsemi/211129/H2PToday2102_design_ONSemi.pdf";
      // this.pdfSrc = 'http://kaoshiftp.book118.com//%E5%B0%8F%E5%AD%A6%E5%88%9D%E4%B8%AD/%E5%88%9D%E4%B8%AD%E6%95%B0%E5%AD%A6/%E6%B5%B7%E6%B7%80%E8%A7%A3%E9%A2%98%E9%A2%98%E5%85%B8-%E5%88%9D%E4%B8%AD%E6%95%B0%E5%AD%A6.pdf'
      this.loadFile(this.pdfSrc);
      return;
      //线上请求
      //  this.$axios.get('')
      //  .then((res)=>{
      //  	this.pdfSrc = res.url
      //  	this.loadFile(this.pdfSrc)
      //  })
    },
    loadFile(url) {
      //初始化pdf
      let loadingTask = PDFJS.getDocument(url);
      loadingTask.promise.then((pdf) => {
        this.pdfDoc = pdf;
        this.pdfPages = this.pdfDoc.numPages;
        //debugger
        this.$nextTick(() => {
          this.renderPage(1);
        });
      });
    },
    renderPage(num) {
      //渲染pdf页
      const that = this;
      this.pdfDoc.getPage(num).then((page) => {
        let canvas = document.getElementById("the_canvas" + num);
        let ctx = canvas.getContext("2d");
        let dpr = window.devicePixelRatio || 1;
        let bsr =
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio ||
          1;
        let ratio = dpr / bsr;
        if (this.initScale === 0) {
          let scale =
            document.body.getBoundingClientRect().width / page.view[2];
          this.pdfScale = scale;
        }

        let viewport = page.getViewport({ scale: this.pdfScale });
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = viewport.width + "px";
        that.pdf_div_width = viewport.width + "px";
        canvas.style.height = viewport.height;
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };
        page.render(renderContext);
        if (this.pdfPages > num) {
          this.renderPage(num + 1);
        }
      });
    },
  },
  mounted() {
    this.getPdfurl();
  },
};
</script>
<style lang="less" scoped>
  .home_wrap {
    width: 100%;
    height: 100%;
    .pdf_down {
      position: fixed;
      display: flex;
      z-index: 20;
      right: 26px;
      bottom: 7%;
      .pdf_set_left {
        width: 30px;
        height: 40px;
        color: #408fff;
        font-size: 11px;
        padding-top: 25px;
        text-align: center;
        margin-right: 5px;
        cursor: pointer;
      }
      .pdf_set_middle {
        width: 30px;
        height: 40px;
        color: #408fff;
        font-size: 11px;
        padding-top: 25px;
        text-align: center;
        margin-right: 5px;
        cursor: pointer;
      }
    }
  }
</style>

标签：ctx,width,let,使用,pdf,pdfJS,pdfScale,viewport
来源： https://blog.csdn.net/weixin_48597380/article/details/121732161

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。