前端文件预览,PDF,word,TXT

先说一下需求:

这里要做的就是从后端返回的URL下载地址,然后前端去渲染出来

刚开始看了其他的一些博主的文章,都是不怎么适用于我,我自己找了几个新的第三方库

vue-office/pdf

官网:vue-office简介 | vue-office

这里支持docx,xlsx,PDF文件格式

mammoth.js

文档:mammoth - npm

PDF预览

我用的是vue-office/pdf这个库

html 复制代码
<vue-office-pdf :src="src" />
javascript 复制代码
//引入该库
import VueOfficePdf from '@vue-office/pdf'

// 使用ref创建一个DOM引用
const src = ref('')

// 简历预览
const handleChange = () => {
  axios({
    method: 'get',
    responseType: 'blob',
    url: 后端传递给你的下载文件的地址
  }).then(({ data }) => {
    // console.log(data, '后端返回') // 后端返回的是流文件
     pdfPrew(data)
  })
}

// pdf文件预览
const pdfPrew = (data) => {
  let reader = new FileReader()
  reader.readAsArrayBuffer(data)
  reader.onload = (loadEvent) => {
    let arrayBuffer = loadEvent.target.result
    src.value = arrayBuffer
  }
}

docx文件预览

我用的是mammoth.js

html 复制代码
<div v-html="convertedHtml"></div>
javascript 复制代码
  const convertedHtml = ref()

// mammoth  word文件预览
const convertToHtml = (file) => {
  const reader = new FileReader()
  reader.onload = (event) => {
    const arrayBuffer = event.target.result
    mammoth
      .convertToHtml({ arrayBuffer: arrayBuffer })
      .then((result) => {
        convertedHtml.value = result.value // 将转换后的 HTML 设置到 data 属性中
      })
      .catch((err) => console.error(err))
  }
  reader.readAsArrayBuffer(file) // 读取文件内容
}

TXT文件

对于txt文件,其实很简单,没必要去用其他的第三方库

html 复制代码
<pre>{{ fileContent }}</pre>
javascript 复制代码
 const fileContent = ref('')

// 此处用于TXT文件的预览
const handleFileUpload = (file) => {
  if (file) {
    const reader = new FileReader()
    reader.readAsText(file, 'UTF-8')
    reader.onload = (e) => {
      fileContent.value = e.target.result
    }
  }
}
相关推荐
老家的回忆13 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
Vertira13 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
十一08299316 小时前
【PDF-XSS攻击】springboot项目-上传文件-解决PDF文件XSS攻击
spring boot·pdf·xss
qq_3938282216 小时前
PDF的图片文字识别工具
windows·pdf·电脑·软件需求·图片处理
wsxqaz21 小时前
浏览器原生控件上传PDF导致hash值不同
算法·pdf·哈希算法
工业3D_大熊10 天前
3D模式格式转换工具HOOPS Exchange如何将3D PDF转换为STEP格式?
3d·pdf·3d格式转换·3d模型格式转换·cad格式转换·cad数据格式转换·3d模型可视化
IDRSolutions_CN11 天前
在 Java 中生成 PDF 缩略图(教程)
java·经验分享·pdf·软件工程·团队开发
IDRSolutions_CN11 天前
用Java将PDF转换成GIF
java·经验分享·pdf·软件工程·团队开发
贤和兄11 天前
使用docx4j 实现word转pdf(linux乱码处理)
linux·pdf·word
Eiceblue11 天前
高效打印 PDF 文档:基础操作与自动打印(含C# .NET方案)
pdf·c#·.net