VUE使用importpdfmake.min.js插件生成PDF

本文链接：https://blog.youkuaiyun.com/fusu_ai/article/details/145284291

APP.VUE

APP.VUE

<template>
  <div id="app">
    <GeneratePdf />
  </div>
</template>

<script>
import GeneratePdf from './components/GeneratePdf.vue';

export default {
  name: 'App',
  components: {
    GeneratePdf
  }
};
</script>

<style>
/* 添加一些全局样式 */
</style>

GeneratePdf.vue组件

<template>
  <div>
    <button @click="generatePdf">生成PDF</button>
  </div>
</template>

<script>

import pdfMake from 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js';
import pdfFonts from 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js';

export default {
  name: 'GeneratePdf',
  methods: {
    generatePdf() {
      const docDefinition = {
        content: [
          { text: 'Hello World', style: 'header' },
          '这是一个简单的PDF示例。',
          {
            text: '这是一个段落。',
            style: 'paragraph'
          }
        ],
        styles: {
          header: {
            fontSize: 18,
            bold: true
          },
          paragraph: {
            fontSize: 12
          }
        }
      };

      pdfMake.createPdf(docDefinition).download('example.pdf');
    }
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style>

index.html首页引入插件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>