Vue导出PDF

最新推荐文章于 2025-04-11 11:37:08 发布

程序猿向前跑

最新推荐文章于 2025-04-11 11:37:08 发布

阅读量7.1k

点赞数 3

分类专栏： Vue 文章标签： vue.js pdf javascript

本文链接：https://blog.youkuaiyun.com/qq_46199553/article/details/127942970

版权

Vue 专栏收录该内容

64 篇文章

订阅专栏

一. 使用vue-to-pdf

npm i vue-to-pdf --save

引入:

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

使用时, 将要转PDF的内容包裹在一个div里面, 给这个div加一个ref属性,绑定一个方法通过原型调用
this. $P D F S a v e (t h i s .$ 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>
 
<style>
</style>