在electron中实现PDF的在线预览

最新推荐文章于 2024-08-13 08:26:06 发布

魑魅魍魉魃魈

最新推荐文章于 2024-08-13 08:26:06 发布

阅读量9.5k

点赞数 1

分类专栏： electron 学习

本文链接：https://blog.csdn.net/weixin_42546445/article/details/89335514

版权

本文介绍了在 Electron 3.x 之后如何解决不支持PDF预览的问题，提供了三种实现PDF在线预览的方法：1) 使用pdfjs-dist，虽然样式简单但能实现分页和打印；2) 集成pdfjs-dist到Webpack配置，参考了思否GitHub上的文档；3) 安装electron-pdf，但由于新建窗口而不适用。

摘要由CSDN通过智能技术生成

由于公司业务的开发需要，需要实现在electron上实现PDF的在线预览功能。electron 3.x版本后就不在支持PDF的预览功能了，官方给的解释是由于人手不够将不再支持PDF预览功能(也是醉了)，在经过一番调研结合大佬们的经验实现了PDF的在在线预览功能

实现方式一、

下载pdfjs-dist
将下好的文件放入static文件目录下

在electron的主线程中通过渲染线程与主线程之间的通信获取viewer.html文件位置

// 监听获取viewer.html文件位置、
function getUrl(win) {
     
  const filePath = process.env.NODE_ENV === 'development' ? `${
       __static}\\pdfjs\\web\\viewer.html` : path.resolve(__dirname, '../../../static/pdfjs/web/viewer.html')
  win.webContents.send('recieve', filePath)
}
// pdf预览获取viewer.html文件位置
    ipcMain.on('getUrl', () => getUrl(win))

在pdf.vue中写

<template>
   <iframe
        :src="base + '?file=' + url"
        :width="width"
        :height="height"
        class="iframe-placeholder"></iframe>
</template>
<script>
import {
      ipcRenderer } from 'electron' // eslint-disable-line

export default {
     
  props: {
     
    url: {
     
      type: String,
      default: '',
    },
    width: {
     
      type: Number,
      default: 750
    },
    height: {
     
      type: Number,
      default: 600
    },
  },
  data() {
     
    return {
     
      preview: false,
      base: '',
    }
  },
  computed: {
     
    // 讲义文件名
    name() {
     
      const uri = decodeURI(this.url)
      const arr = uri.split('/')

最低0.47元/天解锁文章