|
需求：实现一个在线预览pdf、excel、word、图片等文件的功能。 介绍：支持pdf、xlsx、docx、jpg、png、jpeg。 以下使用Vue3代码实现所有功能，建议以下的预览文件标签可以在外层包裹一层弹窗。
图片预览
iframe标签能够将另一个HTML页面嵌入到当前页面中，我们的图片也能够使用iframe标签来进行展示。
sandbox 这个属性如果是单纯预览图片可以不使用，该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。
allow-scripts: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。 allow-top-navigation: 允许将框架内所加载页面中的超链接导航到父级窗口 allow-same-popups: 允许弹窗 (例如 window.open, target="_blank")。如果没有使用该关键字，相应的功能将自动被禁用。 allow-same-origin: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。使用了这个属性，那么当前页面和iframe打开的页面视为同源。
word文档预览（docx）
先下载npm包
npm i docx-preview --save
import { renderAsync } from 'docx-preview';
function fn() {
let blob = res.data
let childRef = document.getElementsByClassName('docxRef');
renderAsync(blob, childRef[0])
}
fn()
blob文件流
预览excel文件(xlsx)
下载包
npm install [email protected]
const reader = new FileReader();
reader.readAsArrayBuffer(res.data)
reader.onload = (event) => {
var data = new Uint8Array(event.target.result);
var workbook = XLSX.read(data, { type: "array" });
var sheetNames = workbook.SheetNames;
var worksheet = workbook.Sheets[sheetNames[0]];
let html = XLSX.utils.sheet_to_html(worksheet);
document.getElementsByClassName('xlsxClass')[0].innerHTML = html
};
pdf预览
下载包 npm install pdfjs-dist
我使用的是npm install [email protected]版本，以下例子使用的是vue3+vite创建的项目
以下例子通过canvas来渲染pdf
{{ pdfParams.pageNumber }} / {{ pdfParams.total }}
下一页
上一页
import { onMounted, ref, reactive } from 'vue'
const pdfParams = reactive({
pageNumber: 1,
total: 0,
});
let pdfDoc = null;
onMounted(async ()=> {
let pdfjs = await import('pdfjs-dist/build/pdf')
let pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry')
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
let url = ref('/test2.pdf')
pdfjs.getDocument(url.value).promise.then(doc => {
pdfDoc = doc
pdfParams.total = doc.numPages
getPdfPage(1)
})
})
const getPdfPage = (number) => {
pdfDoc.getPage(number).then(page => {
const viewport = page.getViewport()
const canvas = document.getElementById('pdf-render')
const context = canvas.getContext('2d')
canvas.width = viewport.viewBox[2]
canvas.height = viewport.viewBox[3]
viewport.width = viewport.viewBox[2]
viewport.height = viewport.viewBox[3]
canvas.style.width = Math.floor(viewport.width) + 'px'
canvas.style.height = Math.floor(viewport.height) + 'px'
let renderContext = {
canvasContext: context,
viewport: viewport,
transform: [1, 0, 0, -1, 0, viewport.height]
}
page.render(renderContext)
})
}
const prevPage = () => {
if(pdfParams.pageNumber > 1) {
pdfParams.pageNumber -= 1
} else {
pdfParams.pageNumber = 1
}
getPdfPage(pdfParams.pageNumber)
}
const nextPage = () => {
if(pdfParams.pageNumber |