vue3移动端嵌入pdf的多种方法小结

<embed class="embedPdf" 
:src="pdfurl" 
type="application/pdf">

<div class="vuePdfEmbed">
        <VuePdfEmbed
          :source="state.source"
          :style="scaleFun"
          class="vue-pdf-embed"
          :page="state.pageNum"
          width="700"
        />
        <div class="page-tool">
          <div class="page-tool-item" @click="lastPage">上一页</div>
          <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
          <div class="page-tool-item" @click="nextPage">下一页</div>
          <div class="page-tool-item" @click="downloadPDF">下载</div>
        </div>
    </div>

import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数

const pdfurl = ref("......pdf地址")
const state = reactive({
  source: pdfurl, //预览pdf文件地址
  pageNum: 1, //当前页面
  scale: 1, // 缩放比例
  numPages: 0, // 总页数
});
const scaleFun = reactive({
  transform:'scale('+state.scale+')'
})

// 获取上一页
function lastPage(){
  if(state.pageNum>1){
    state.pageNum--
  }
}

// 获取下一页
function nextPage(){
  if(state.pageNum<state.numPages){
    state.pageNum++
  }
}

// 下载pdf
function downloadPDF(){
	fetch(encodeURI(pdfurl.value)).then(res => {
        res.blob().then(myBlob => {
          const href = URL.createObjectURL(myBlob);
          const a = document.createElement('a');
          a.href = href;
          a.download = 'report'; // 下载文件重命名
          a.click();
          a.remove();
        });
      });
}

onMounted(() => {
  // 加载异步任务
  const loadingTask = createLoadingTask(state.source);
  // 载入pdf后获取页数
  loadingTask.promise.then((pdf) => {
    state.numPages = pdf.numPages;
  });

import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数
const pdfurl = ref("......pdf地址")
const state = reactive({
  source: pdfurl, //预览pdf文件地址
  pageNum: 1, //当前页面
  scale: 1, // 缩放比例
  numPages: 0, // 总页数
});
const scaleFun = reactive({
  transform:'scale('+state.scale+')'
})
// 获取上一页
function lastPage(){
  if(state.pageNum>1){
    state.pageNum--
  }
}
// 获取下一页
function nextPage(){
  if(state.pageNum<state.numPages){
    state.pageNum++
  }
}
// 下载pdf
function downloadPDF(){
	fetch(encodeURI(pdfurl.value)).then(res => {
        res.blob().then(myBlob => {
          const href = URL.createObjectURL(myBlob);
          const a = document.createElement('a');
          a.href = href;
          a.download = 'report'; // 下载文件重命名
          a.click();
          a.remove();
        });
      });
}
onMounted(() => {
  // 加载异步任务
  const loadingTask = createLoadingTask(state.source);
  // 载入pdf后获取页数
  loadingTask.promise.then((pdf) => {
    state.numPages = pdf.numPages;
  });

.vuePdfEmbed{
  flex: 1;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.vuePdfEmbed{
  .page-tool {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    width: 320px;
    align-items: center;
    margin: auto;
    justify-content: space-around;
  }
  .page-tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
  }
}