VUE3 预览docx、pdf文件(demo为预览本地文件)
vue 3 预览DOCX PDF 文件
·
DOCX 和PDF 预览。分别用到了 docx-preview和pdfjs开源组件
安装依赖
npm i docx-preview -D
npm i pdfjs-dist -D
<template>
<h1>查看docx文件</h1>
<input type="file" ref="input" @change="filechange" />
<div ref="container"></div>
<h1>查看PDF文件</h1>
<input type="file" ref="inputpdf" @change="pdfChange" />
<br />
<br />
<br />
<el-row justify="center">
<el-col :span="6">
<el-pagination
layout="prev, pager, next"
small
background
:total="pdfPagesNum"
@current-change="currentChange"
/>
</el-col>
</el-row>
<br />
<canvas ref="renderContext"></canvas>
</template>
<script setup>
import { ref } from "vue";
import { renderAsync } from "docx-preview"; // 引入异步渲染方法
import * as PDFJS from "pdfjs-dist/legacy/build/pdf"; // 引入PDFJS
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
let container = ref(null);
let renderContext = ref(null);
let pdfUrl = "";
let pdfPagesNum = ref(0);
let readerpdfDoc = null;
function filechange(event) {
renderAsync(event.target.files[0], container.value, null, {
className: "docx", // 默认和文档样式类的类名/前缀
inWrapper: true, // 启用围绕文档内容渲染包装器
ignoreWidth: false, // 禁止页面渲染宽度
ignoreHeight: false, // 禁止页面渲染高度
ignoreFonts: false, // 禁止字体渲染
breakPages: true, // 在分页符上启用分页
ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
experimental: false, //启用实验性功能(制表符停止计算)
trimXmlDeclaration: true, //如果为真,xml声明将在解析之前从xml文档中删除
debug: false, // 启用额外的日志记录
});
}
function pdfChange(event) {
if (window.createObjectURL != undefined) {
// basic
pdfUrl = window.createObjectURL(event.target.files[0]);
} else if (window.URL != undefined) {
// mozilla(firefox)
pdfUrl = window.URL.createObjectURL(event.target.files[0]);
} else if (window.webkitURL != undefined) {
// webkit or chrome
pdfUrl = window.webkitURL.createObjectURL(event.target.files[0]);
}
getPdf(pdfUrl, 1);
}
function getPdf(url, pageNum) {
PDFJS.getDocument(url).promise.then((pdfDoc) => {
pdfPagesNum.value = pdfDoc.numPages * 10; // pdf的总页数
//获取第pageNum页的数据
readerpdfDoc = pdfDoc;
showPdf(pdfDoc,pageNum)
});
}
function currentChange(num) {
showPdf(readerpdfDoc, num);
}
function showPdf(pdfDoc,pageNum) {
pdfDoc.getPage(pageNum).then((page) => {
// 设置canvas相关的属性
const canvas = renderContext.value;
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
const bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1;
const ratio = dpr / bsr;
const viewport = page.getViewport({ scale: 1 });
canvas.width = viewport.width * ratio;
canvas.height = viewport.height * ratio;
canvas.style.width = viewport.width + "px";
canvas.style.height = viewport.height + "px";
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
const context = {
canvasContext: ctx,
viewport: viewport,
};
// 数据渲染到canvas画布上
page.render(context);
});
}
</script>
DOCX 实现说明
引入renderAsync方法
将blob数据流传入方法中,渲染word文档
PDF实现说明
设置PDFJS.GlobalWorkerOptions.workerSrc的地址
通过PDFJS.getDocument处理pdf数据,返回一个对象pdfDoc
通过pdfDoc.getPage单独获取第1页的数据
创建一个dom元素,设置元素的画布属性
通过page.render方法,将数据渲染到画布上
呈现效果
选择DOCX文件
选择PDF文件
更多推荐
已为社区贡献1条内容
所有评论(0)