vue3嵌入pdf的两种办法

1.使用embed嵌入

好处简单,代码量少,功能齐全
缺点有固定样式,难以修改,不可定制

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

2.使用vue-pdf-embed(pdf预览)的形式定制嵌入pdf

优点除了pdf的内容别的都可以修改,可以定制样式
缺点要自己手写下载,下一页,上一页等功能
使用vue-pdf-embed插件展示预览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>

分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数,这个函数是一个异步函数,之后会返回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;
  }
}
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值