加载脚本
// word
await this.utils.loadScript('https://unpkg.com/promise-polyfill/dist/polyfill.min.js')
await this.utils.loadScript('https://unpkg.com/jszip/dist/jszip.min.js')
await this.utils.loadScript('https://unpkg.com/docx-preview@0.1.9/dist/docx-preview.min.js')
// excel
await this.utils.loadScript('https://unpkg.com/xlsx/dist/xlsx.full.min.js')
// pdf
await this.utils.loadScript('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.9.179/pdf.min.js')
WORD
// 元素
<div id="viewModalContainer"></div>
// 方法
const data = await fetch(url)
.then((response) => response.blob())
.then((res) => {
this.$('dialog_lkw0jna2').show()
docx.renderAsync(res, document.getElementById('viewModalContainer'), null, {
// ignoreWidth: true,
// ignoreHeight: true,
}).then(result => {
console.log('result', result)
})
})
return data
excel
// 元素
<div id="excelContainer"></div>
// 方法
const data = await fetch(url)
.then((response) => response.arrayBuffer())
.then((res) => {
this.$('dialog_lkwbvqrc').show()
const wb = XLSX.read(res);
console.log('wb', wb)
// const ws = wb.Sheets[wb.SheetNames[0]];
// console.log('ws', ws)
// const html = XLSX.utils.sheet_to_html(ws)
let html = '';
wb.SheetNames.forEach(function (name, index) {
let ws = wb.Sheets[name];
let str = XLSX.utils.sheet_to_html(ws, { header: 1, defval: '' });
// 只截取table的内容
let startNo = str.indexOf(`<table>`);
let endNo = str.indexOf(`</table>`);
str = str.substring(startNo, endNo + `</table>`.length);
str = str.replace(/(\b(?:id|t|v)=".*?")/g, '');
str = str.replace('<table>', `<table border="1" style="border-collapse:collapse; width: 100%; border:1px solid #666666; margin-bottom:5px;font-size:14px;margin: 15px 0;">`);
html += str;
})
const dom = document.getElementById('excelContainer')
dom.innerHTML = html
})
// 有个canvas元素
<canvas id="pdfContainer"></canvas>
// 方法
const loadingTask = pdfjsLib.getDocument(url)
loadingTask.promise.then(res => {
this.$('dialog_lkwbvqrg').show()
// 获取 canvas 元素
const canvas = document.getElementById('pdfContainer')
res.getPage(1).then(function (page) {
const viewport = page.getViewport({ scale: 1 });
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: context,
viewport: viewport
});
}).catch(error => {
console.log('error:', error)
})
})
img
- 根据使用的组件库直接预览
this.utils.previewImage({ current: rowData.path })
video
- 新窗口打开
window.open(rowData.path)
文章来源地址https://www.toymoban.com/news/detail-633504.html
文章来源：https://www.toymoban.com/news/detail-633504.html
到了这里，关于前端根据url在线预览功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
