使用pdfjs实现在线预览pdf

这篇具有很好参考价值的文章主要介绍了使用pdfjs实现在线预览pdf。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在工作中可能会遇到前端展示pdf文件进行预览并提供下载的需求场景,例如操作指引,这个时候需要寻找一款实现该功能的插件,以pdjjs举例子

1. 安装pdf.js

npm install pdfjs-dist

2. 引入pdf.js

import pdfjsLib from 'pdfjs-dist'

3.加载pdf文件流

这个地方区分是请求后端接口还是直接加载本地pdf文件

如果是请求后端获取到的pdf文件流

axios.get('/api/pdfdoc', { responseType: 'blob' })
  .then(response => {
    const blob = new Blob([response.data], { type: 'application/pdf' })
    this.viewPdf(blob)
  })

如果是读取本地的文件,则url地址直接是本地的地址

在viewPdf()方法中,使用getDocument()方法加载pdf文件:

viewPdf(fileUrl){
let _this = this;
PDFJS.getDocument(fileUrl).then(fileContent =>{
_this.pdfDoc = fileContent;
setTimeout(()=>{
_this.renderPage();
},100)
})

},

4. 渲染pdf

使用pdf.js的Renderer渲染pdf文件。可以使用getViewport()方法获取pdf页面的视图大小。

在renderPdf()方法中,遍历pdf文件的每个页面,并使用Renderer将其渲染:

renderPage(){
// 获取页面canvas节点
let canvas = document.getElementById('infoPrvacy-content');
const ctx = canvas.getContext("2d");
this.pdfDoc.getPage(1).then(page =>{
// 文件页面的视图 1倍
const viewport = page.getViewport(0.5);
// 将画布宽度设置为视图宽度
canvas.width = viewport.width;
canvas.height = viewport.height;

const renderContext = {
canvasContext: ctx,
viewport: viewport
};
console.log(renderContext);
// 渲染页面内容:参数是canvas画布上下文,以及文件视图
page.render(renderContext);
})
},

注意: 一定要引用字体包,否则会乱码

const obj = {};
obj.cMapUrl = '/assets/pdfjs/cmaps/';
obj.cMapPacked = true;
obj.url = './static/test.pdf'
this.viewPdf(obj)

js部分的代码文章来源地址https://www.toymoban.com/news/detail-724466.html

<script>
const pdfJS = require("pdfjs-dist");

pdfJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry");
export default {
  mounted() {},
  data() {
    return {
      pageNo: null,
      pdfPageNumber: null,
      pdfTotalPages: 1,
      renderingPage: false,
      pdfData: null, // PDF的base64
      scale: 1, // 缩放值
    };
  },
  methods: {
    uploadFile() {
      let inputDom = this.$refs.fielinput;
      let file = inputDom.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        let data = atob(
          reader.result.substring(reader.result.indexOf(",") + 1)
        );
        this.loadPdfData(data);
      };
    },
    loadPdfData(data) {
      // 引入pdf.js的字体
      let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/";
      //读取base64的pdf流文件
      this.pdfData = pdfJS.getDocument({
        data: data, // PDF base64编码
        cMapUrl: CMAP_URL,
        cMapPacked: true,
      });
      console.log(this.pdfData);
      this.renderPage(1);
      this.renderScrollPdf();
    },

    // 根据页码渲染相应的PDF
    renderPage(num) {
      this.renderingPage = true;
      this.pdfData.promise.then((pdf) => {
        this.pdfPageNumber = pdf.numPages;

        pdf.getPage(num).then((page) => {
          // 获取DOM中为预览PDF准备好的canvasDOM对象
          let canvas = this.$refs.myCanvas;
          let viewport = page.getViewport(this.scale);
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          let ctx = canvas.getContext("2d");
          let renderContext = {
            canvasContext: ctx,
            viewport: viewport,
          };
          page.render(renderContext).then(() => {
            this.renderingPage = false;
            this.pageNo = num;
          });
        });
      });
    },
    clickPre() {
      if (!this.renderingPage && this.pageNo && this.pageNo > 1) {
        this.renderPage(this.pageNo - 1);
      }
    },
    clickNext() {
      if (
        !this.renderingPage &&
        this.pdfPageNumber &&
        this.pageNo &&
        this.pageNo < this.pdfPageNumber
      ) {
        this.renderPage(this.pageNo + 1);
      }
    },
    renderScrollPdf() {
      this.pdfData.promise.then((pdf) => {
        this.pdfTotalPages = pdf.numPages;
        this.renderScrollPdfPage(1);
      });
    },
  },
};
</script>



到了这里,关于使用pdfjs实现在线预览pdf的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端pdf预览、pdfjs的使用

    关于前端预览pdf,最简单的方式是使用 window.open() 直接在浏览器的新窗口打开就好,浏览器本身也是提供了非常多的功能 但是因为客户的某些需求,不能使用浏览器自身的功能。后来又使用了 https://github.com/gjTool/pdfh5,也挺好用的,操作比较简单。使用了一段时间吧,但是还

    2024年02月12日
    浏览(41)
  • nuxt3项目使用pdfjs-dist预览pdf

    使用的包的源代码是 pdfjs - npm 但是我们实际上项目中使用的是pdfjs打包后的dist文件,也就是pdfjs-dist - npm 所以我们需要使用这个命令 我们可以克隆pdfjs这个包来看源代码,里面有使用的例子,也可以根据源代码自己打包生成你想要的版本的pdfjs-dist,官方文档强调了对于新旧

    2024年02月09日
    浏览(29)
  • JS将PDF转图片,pdfjs的使用

    Hi I’m Shendi 最近做转换工具,需要将pdf转图片,这里记录下来 JS将PDF转图片,pdfjs的使用 A general-purpose, web standards-based platform for parsing and rendering PDFs. 一个通用的、基于web标准的平台,用于解析和呈现PDF。 简单讲就是用来展示pdf的 https://mozilla.github.io/pdf.js/examples/ 这个api文档

    2024年02月11日
    浏览(57)
  • Vue3前端h5移动端页面预览PDF使用pdfjs-dist,添加自定义文本水印

    pnpm i pdfjs-dist@2.5.207

    2024年01月18日
    浏览(73)
  • pdfjs解决ie浏览器预览pdf问题

    pdfjs是一个js库,可以将pdf文件用canvas重新绘制,从而无需借助pdf读取插件就可以直接预览。 目前chrome内核的浏览器已内置pdf读取插件,但ie浏览器还没有。而我们最近在做的一个项目使用对象是医院,使用的浏览器竟然还是ie。所以我们只能把项目用js重写(当然也可以用j

    2024年02月07日
    浏览(48)
  • 无需任何三方库,在 Next.js 项目在线预览 PDF 文件

    之前在使用Vue和其它框架的时候,预览 PDF 都是使用的 PDFObject 这个库,步骤是:下载依赖,然后手动封装一个 PDF 预览组件,这个组件接收本地或在线的pdf地址,然后在页面中使用组件的车时候,通过路由参数去获取目标PDF地址。 最近使用 Next.js 重构公司官网的时候,也碰到

    2024年01月21日
    浏览(45)
  • vue2 使用pdf.js 实现pdf预览,并可复制文本

            需求:pdf预览,并且可以选中pdf的内容进行复制。                 在ruoyi的vue前端项目中用到,参考了网上不少文章,因为大部分没给具体的pdf.js版本,导致运行过程中报各种api 错误,经过尝试以下版本可用,故记录一下:         安装依赖:         vue 页面

    2024年01月19日
    浏览(55)
  • 前端(vue)js在线预览PDF、Word、Excel、ppt等office文件

    可选参数 pdf=true,word文档尝试以pdf方式显示,默认false watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png saveable=true,是否允许保存源文件,默认false printable=false,是否允许打印,默认true ©able=false,是否允许选择复制内容,

    2024年02月13日
    浏览(70)
  • 文档在线预览(二)word、pdf文件转html以实现文档在线预览

    @ 目录 一、前言 1、aspose 2 、poi + pdfbox 3 spire 二、将文件转换成html字符串 1、将word文件转成html字符串 1.1 使用aspose 1.2 使用poi 1.3 使用spire 2、将pdf文件转成html字符串 2.1 使用aspose 2.2 使用 poi + pbfbox 2.3 使用spire 3、将excel文件转成html字符串 3.1 使用aspose 3.2 使用poi + pdfbox 3.3 使用

    2024年02月06日
    浏览(141)
  • vue-pdf实现pdf文件在线预览

    在日常的工作中在线预览 PDF 文件的需求是很多的,下面介绍一下使用 vue-pdf 实现pdf文件在线预览 使用 npm 安装 vue-pdf npm install vue-pdf 使用 vue-pdf 显示 PDF 文件 此时页面中就会显示我们提供的 PDF 文件了,但是此时只显示了 PDF 文件的第一页 按页显示 PDF 文件 使用 vue-pdf 能满足

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包