前端将pdf文件转成canvas

最新推荐文章于 2025-05-16 21:32:48 发布

zyf1910

最新推荐文章于 2025-05-16 21:32:48 发布

阅读量2.1k

点赞数 1

分类专栏： javascript 文章标签： vue canvas js

本文链接：https://blog.youkuaiyun.com/Jeo_blue/article/details/111991966

版权

本文介绍如何在Vue项目中将PDF文件转换为Canvas进行前端展示，详细记录了遇到的问题以及解决方法，包括使用vue-pdf插件的问题和自定义实现的解决方案，提供了一个已封装的组件及GitHub源码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从服务器请求pdf文件转成canvas进行前端展示

最近做一个vue项目，需要将pdf文件在页面展示，由于踩了两个坑，所以记录一下，供大家参考。

开始我用的是vue-pdf插件，但是遇到一个问题，不显示pdf上面的印章？？？，所以自己下载pdf.js和pdf.worker.js,然后修改了一行代码，再进行压缩引入。下面是将这个功能封装的一个组件：

/**
 * @param {string} fileUrl 文件地址
 */
<template>
  <div ref="parent">
  </div>
</template>
<script>
export default {
   
  name: 'pdf',
  props: ['fileUrl'],
  watch: {
   
    fileUrl (val) {
   
      if (this.$refs.parent) {
   
        this.$refs.parent.innerHTML = ''
      }
      if (val) {
   
        this.getPdfFile(val)
      }
    }
  },