Question

我正在使用在新窗口中打开的PDF创建vue-electron应用程序。我有一个导入并显示文档列表的组件：

Documents.vue

<template lang="pug">
  v-card
    v-toolbar(color="primary" dark)
      v-toolbar-title Food Establishments
    v-list
      v-list-group(v-for="category in categories" :key="category.title" :prepend-icon="category.icon")
        v-list-tile(slot="activator")
          v-list-tile-content
            v-list-tile-title {{ category.title }}
        v-list-tile(v-for="doc in category.docs" :key="doc.title" @click="")
          v-list-tile-avatar
              img(src="../assets/shared/pdf.png" alt="pdf" v-if="fileType(doc.path) === 'pdf'")
          v-list-tile-content
            v-list-tile-title(@click="open(doc.path)") {{ doc.title }}
</template>

<script>
import { openFile } from '../newWindow.js'
export default {
  name: 'Documents',
  props: {
    categories: { type: Array, required: true }
  },
  methods: {
    fileType (url) {
      return url.split('').slice(url.length - 3, url.length).join('')
    },
    open (file) {
      openFile(file)
    }
  }
}
</script>

导入的文档位于一个数组中

docs: [
      { title: 'Chapter 1 - Purpose and Definitions', path: require('./assets/docs/food/rules/Chapter 1 Purpose and Definitions.pdf') },
      { title: 'Chapter 2 - Management and Personnel', path: require('./assets/docs/food/rules/Chapter 2 Management and Personnel.pdf') },
      { title: 'Chapter 3 - Food', path: require('./assets/docs/food/rules/Chapter 3 Food.pdf') },
      { title: 'Chapter 4 - Equipment, Utensils, and Linens', path: require('./assets/docs/food/rules/Chapter 4 Equipment Utensils and Linens.pdf') },
      { title: 'Chapter 5 - Water, Plumbing, and Waste', path: require('./assets/docs/food/rules/Chapter 5 Water Plumbing and Waste.pdf') },
      { title: 'Chapter 6 - Physical Facilities', path: require('./assets/docs/food/rules/Chapter 6 Physical Facilities.pdf') },
      { title: 'Chapter 7 - Poisonous or Toxic Materials', path: require('./assets/docs/food/rules/Chapter 7 Poisonous or Toxic Materials.pdf') },
      { title: 'Chapter 8 - Compliance and Enforcement', path: require('./assets/docs/food/rules/Chapter 8 Compliance and Enforcement.pdf') },
      { title: 'Annex 1 - Enforcement', path: require('./assets/docs/food/rules/Annex 1 Enforcement.pdf') },
      { title: 'Annex 2 - Reference', path: require('./assets/docs/food/rules/Annex 2 References.pdf') },
      { title: 'Annex 3 - Public Health Reasons', path: require('./assets/docs/food/rules/Annex 3 Public Health Reasons.pdf') },
      { title: 'Annex 4 - Active Managerial Control', path: require('./assets/docs/food/rules/Annex 4 Active Managerial Control.pdf') },
      { title: 'Annex 5 - Conducting Risk Based Inspections', path: require('./assets/docs/food/rules/Annex 5 Conducting Risk Based Inspections.pdf') },
      { title: 'Annex 6 - Food Processing Criteria', path: require('./assets/docs/food/rules/Annex 6 Food Processing Criteria.pdf') },
      { title: 'Annex 7 - Model Forms', path: require('./assets/docs/food/rules/Annex 7 Model Forms.pdf') }
    ]

当您单击文档时，它会传递网址（看起来像这样）：

/4943bb42fe37b409ee0b80e92c619b03.pdf

打开新窗口的功能：

newWindow.js

const { BrowserWindow } = require('electron').remote
const PDFWindow = require('electron-pdf-window')

const openFile = (file) => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { plugins: true }
  })
  PDFWindow.addSupport(win)
  win.loadURL('http://localhost:8080' + file)
}

module.exports = { openFile }

但是当新窗口打开时，它为空白。如果我将网址http://localhost:8080/4943bb42fe37b409ee0b80e92c619b03.pdf复制并粘贴到chrome或firefox中，则会显示该文件。有人可以告诉我我在做什么错吗？

如何使用vue-cli-plugin-electron-builder和electronic-pdf-window在新窗口中打开PDF

0 个答案: