admin管理员组文章数量:1648945
快速开始
- 安装依赖
npm i pdfjs-dist@4.5.136
- 将 pdf.worker.mjs 文件放入服务端静态文件中,这是为了方便在下面设置 workerSrc 准确找到资源。因为该包是通过 npm 管理的包,引用路径的时候会很不方便。而将找个 js 文件方法 public 中在开发阶段会找不到路径。因此放入服务端。该文件在 node_modules/pdfjs-dist/build/pdf.worker.mjs
- 页面中使用
<template>
<div style="height: 100%;">
<canvas id="the-canvas"></canvas>
<button @click="nextPage">下一页</button>
</div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
// 将 pdflib 库放入到 window 对象中
import 'pdfjs-dist'
onMounted(() => {
pdfShow()
})
const pageNum = ref(1)
const pdfContent = ref(null)
// http://192.168.1.30:30001 是本地启动的 node 服务,用于模拟服务端的情况
const pdfShow =async (url= 'http://192.168.1.30:30001/static/pdf/aaa.pdf') => {
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'http://192.168.1.30:30001/static/pdf/pdf.worker.mjs'
console.log(window.pdfjsLib.GlobalWorkerOptions.workerSrc);
const pdf = await window.pdfjsLib.getDocument(url)
pdfContent.value = pdf
pdf.promise.then(async (res) => {2.
const page =await res._transport.getPage(pageNum.value)
pageRender(page)
})
}
const pageRender = (page) => {
const scale = 1.5
const viewport = page.getViewport({scale})
const outputScale = window.devicePixelRatio || 1;
const canvas = document.getElementById('the-canvas');
const context = canvas.getContext('2d');
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
const transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
const renderContext = {
canvasContext: context,
transform: transform,
viewport: viewport
};
page.render(renderContext);
}
const nextPage = () => {
pageNum.value += 1
console.log(pdfContent.value);
pdfContent.value.promise.then(async (res) => {
const page =await res._transport.getPage(pageNum.value)
pageRender(page)
})
}
</script>
<style lang="scss" scoped>
</style>
版权声明:本文标题:在 vue3 项目中使用 pdfjs 渲染 pdf 文档 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729504679a1203490.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论