在Vue中实现文件预览与打印的代码示例

npm install pdfjs-dist -S

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist'
export default {
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    pdfjsLib.getDocument('path/to/pdf/file.pdf').promise.then(pdf => {
      pdf.getPage(1).then(page => {
        const viewport = page.getViewport({ scale: 1 })
        canvas.height = viewport.height
        canvas.width = viewport.width
        const renderContext = {
          canvasContext: ctx,
          viewport: viewport
        }
        page.render(renderContext)
      })
    })
  }
}
</script>

<template>
  <div>
    <img :src="imageUrl" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image/file.jpg'
    }
  }
}
</script>

<template>
  <div>
    <button @click="printDocument">打印文档</button>
  </div>
</template>
<script>
export default {
  methods: {
    printDocument() {
      window.print()
    }
  }
}
</script>