Vue导出PDF

最新推荐文章于 2024-08-20 14:01:33 发布

finedayforu

最新推荐文章于 2024-08-20 14:01:33 发布

阅读量445

点赞数

文章标签： js html css vue java

本文链接：https://blog.csdn.net/finedayforu/article/details/115261934

版权

本文介绍了两种在Vue项目中导出PDF的方法：一是利用vue-to-pdf插件，通过将HTML转换为base64图片生成不可编辑且清晰度一般的PDF；二是直接利用浏览器的系统打印功能，配合PDF打印机，可能会遇到样式丢失的问题，尤其是使用UI框架时。

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

一. 使用vue-to-pdf

https://www.npmjs.com/package/vue-to-pdf

npm i vue-to-pdf --save

引入:

import vueToPdf from 'vue-to-pdf';
 
Vue.use(vueToPdf);

使用时, 将要转PDF的内容包裹在一个div里面, 给这个div加一个ref属性,绑定一个方法通过原型调用this.$PDFSave(this.$refs['content'], '我的文件')

<template>
  <div>
    <div ref="content">打印出的内容</div>
    <input type="button" value="导出PDF" @click="toPdf" />
  </div>
</template>

<script>
export default {
  methods: {
    toPdf() {
      this.$PDFSave(this.$refs["content"], "我的文件");
    },
  },
};
</script&