前端通过docx-preview和pdfjs插件实现docx、pdf文件在线预览

docx文件格式在线预览

插件:docx-preview

安装:

npm i docx-preview

使用:

创建一个容器标签

引入并创建渲染函数

复制代码
import { renderAsync } from "docx-preview";
renderDocx() {
      renderAsync(this.fileData, this.$refs.file, null, {
        className: "docx", //默认和文档样式类的类名/前缀
        inWrapper: true, //启用围绕文档内容呈现包装器
        ignoreWidth: false, //禁用页面的渲染宽度
        ignoreHeight: false, //禁用页面的渲染高度
        ignoreFonts: false, //禁用字体渲染
        breakPages: true, //在分页符上启用分页
        ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
        experimental: false, //启用实验功能(制表符停止计算)
        trimXmlDeclaration: true, //如果为true,则在解析之前将从xml文档中删除xml声明
        useBase64URL: false, //如果为true,图像、字体等将转换为base 64 URL,否则使用URL.createObjectURL
        useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
        showChanges: false, //启用文档更改的实验渲染(插入/删除)
        debug: false, //启用额外的日志记录
      });
    }
复制代码

PDF文件格式在线预览

插件:pdfjs

安装:

npm i pdfjs-dist

使用:

<canvas
  v-for="num in numPages"
  :key="num"
  :id="'canvas_' + num"
  class="canvas"
></canvas>
复制代码
async renderPdf(num = 1) {
      this.fileData.getPage(num).then(page => {
        // 设置canvas相关的属性
        const canvas = document.getElementById("canvas_" + num);
        const ctx = canvas.getContext("2d");
        const dpr = window.devicePixelRatio || 1;
        const bsr =
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio ||
          1;
        const ratio = dpr / bsr;
        const viewport = page.getViewport({ scale: this.pdfScale }); // 设置放缩比率
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = viewport.width + "px";
        canvas.style.height = viewport.height + "px";
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        const renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };
        // 数据渲染到canvas画布上
        page.render(renderContext);
        if (this.numPages > num) {
          setTimeout(() => {
            return this.renderPdf(num + 1);
          });
        }
      });
    },
复制代码

此处pdf的渲染数据this.fileData必须是一个ArrayBuffer格式的数据,如果请求的的数据是Blob格式必须要先使用Blob.arrayBuffer()转换

pdf的放大和缩小

复制代码
// pdf放大
setPdfZoomin() {
  const max = 2;
  if (this.pdfScale >= max) {
    return;
  }
  this.pdfScale = this.pdfScale + 0.2;
  this.renderPdf();
},
// pdf缩小
setPdfZoomout() {
  const min = 0.6;
  if (this.pdfScale <= min) {
    return;
  }
  this.pdfScale = this.pdfScale - 0.1;
  this.renderPdf();
},
 
复制代码

 

posted @   每天进步多一点  阅读(277)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
历史上的今天:
2021-01-09 web storage的用法
2019-01-09 使用C#WebClient类访问(上传/下载/删除/列出文件目录)
2017-01-09 ADO.NET对象模型
2017-01-09 趣味理解ADO.NET对象模型
2017-01-09 C# ToString格式大全
2017-01-09 C#中A a=new B()的意义
2017-01-09 sql中时间的一些特殊转换
点击右上角即可分享
微信分享提示