如何将实现TIFF文件预览的HTML代码改写为Vue组件

1. 前置资源准备 #

• 将你本地的tiff.js文件移入Vue项目的静态资源目录，推荐存放在src/assets/js/路径下
• 原有代码依赖的jQuery、Bootstrap如果你Vue项目中没有其他用途可以直接移除，所有DOM操作可以用Vue原生能力实现，无需额外依赖

2. 单文件组件完整实现代码 #

<template>
  <div>
    <!-- TIFF文件选择器 -->
    <input type="file" accept=".tif,.tiff" @change="handleFileChange">
    <!-- TIFF渲染容器，用ref标记方便获取DOM -->
    <div ref="tiffOutput"></div>
  </div>
</template>

<script>
// 引入你本地的tiff.js，路径根据你实际存放位置调整
import '../assets/js/tiff.js'

export default {
  name: 'TiffPreview',
  methods: {
    handleFileChange(e) {
      const selectFile = e.target.files[0]
      if (!selectFile) return
      this.previewTiff(selectFile)
    },
    previewTiff(file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        const buffer = e.target.result
        // 直接调用tiff.js暴露的全局Tiff构造函数，逻辑和你原有代码一致
        const tiff = new Tiff({ buffer: buffer })
        const canvas = tiff.toCanvas()
        // 清空原有渲染内容后插入新生成的canvas
        this.$refs.tiffOutput.innerHTML = ''
        if (canvas) {
          this.$refs.tiffOutput.appendChild(canvas)
        }
        // 可按需获取宽高做后续处理
        const width = tiff.width()
        const height = tiff.height()
      }
      reader.readAsArrayBuffer(file)
    }
  }
}
</script>

3. 注意事项 #

• 如果引入tiff.js后提示Tiff is not defined，说明tiff.js是挂载在window对象上的，把new Tiff改成new window.Tiff即可正常调用
• 若需要预览多页TIFF文件，可调用tiff.countDirectory()获取总页数，循环调用tiff.setDirectory(页码)切换不同页后再生成对应canvas即可
• 原有逻辑无需做核心修改，只是把jQuery的事件绑定、DOM操作替换为Vue的原生API，整体TIFF解析渲染逻辑和你之前的HTML版本完全一致

内容的提问来源于stack exchange，提问作者DRoseGao