vue 文件在线预览和下载

Vue是一种流行的前端框架，它提供了许多功能和工具，让开发者可以轻松地构建现代化的Web应用程序。其中一个常见的需求是允许用户在线预览和下载各种文件，例如PDF、图片和视频文件等。下面我们将探讨如何在Vue应用程序中实现此功能。

要实现文件在线预览和下载，我们可以使用多种技术，其中最常用的是防止跨站脚本攻击（XSS）的安全方法。一种通用的办法是使用Vue-resource或Axios这样的HTTP库，以便从Web服务器获取文件数据。然后，我们可以使用HTML的Object来显示PDF、图片和视频等文件，或使用HTML的Anchor来下载文件。

对于PDF文件，我们可以使用本地的PDF.js库来显示它，或者引用网络上的PDF.js库，如下所示：

<template>
  <div>
    <object type="application/pdf" :data="pdfUrl" width="100%" height="800px"></object>
  </div>
</template>

<script>
import pdfjs from 'pdfjs-dist'
export default {
  data () {
    return {
      pdfUrl: 'https://example.com/files/document.pdf'
    }
  },
  mounted () {
    pdfjs.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'
  }
}
</script>

对于其他文件类型，我们需要使用不同的HTML标记来显示它们。例如，要显示图像，我们可以使用img标签，如下所示：

<template>
  <div>
    <img :src="imageUrl" width="100%" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageUrl: 'https://example.com/files/image.jpg'
    }
  }
}
</script>

对于视频文件，我们可以使用HTML5的video标签，如下所示：

<template>
  <div>
    <video :src="videoUrl" controls width="100%" height="auto"></video>
  </div>
</template>

<script>
export default {
  data () {
    return {
      videoUrl: 'https://example.com/files/video.mp4'
    }
  }
}
</script>

最后，要下载文件，我们可以使用HTML的Anchor标记，并为其设置download属性和href属性，如下所示：

<template>
  <div>
    <a :href="fileUrl" download>Download File</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileUrl: 'https://example.com/files/document.pdf'
    }
  }
}
</script>

通过以上方法，我们可以实现Vue文件在线预览和下载功能。