Vue导出PDF

最新推荐文章于 2025-06-20 09:18:40 发布

qing___tian_

最新推荐文章于 2025-06-20 09:18:40 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js pdf 前端

本文链接：https://blog.csdn.net/qing___tian_/article/details/133818659

本文介绍了如何在Vue项目中使用vue-to-pdf库将部分网页内容转换为PDF格式进行下载，包括全局引入和局部使用示例，以及注意生成的PDF为图片类型，清晰度有限。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue后台管理系统的构建时需要将部分网页内容导出为PDF下载可采用以下方法

一. 使用vue-to-pdf

yarn add vue-to-pdf
//或者
npm i vue-to-pdf --save

引入：

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

//可以在main.js进行全局引入，或者在要使用的页面的script标签内进行局部引入

二.使用时, 将要转PDF的内容包裹在一个div里面, 给这个div加一个ref属性,绑定一个方法通过原型调用

this.$PDFSave(this.$refs["exportPDF"], 导出的文件名)
//exportPDF代表你绑定的ref值，第二个参数是导出时使用的文件名

使用方法如下

<div>
    <div class="shijuan" ref="exportPDF">
        <!-- 绑定ref为exportPDF的div内的内容是要导出的内容 -->
        <h1>要导出的内容</h1>
    </div>
    <div class="daochubtn"><button plain  @click="toPdf" >导出</button></div>
</div>
<script>
import Vue from "vue";
import vueToPdf from 'vue-to-pdf';
Vue.use(vueToPdf);
export default {
    name: "DaoChu",
    methods: {
        toPdf() {
      this.$PDFSave(this.$refs["content"], "name");
        },
    },
};
</script>

转换后的PDF是图片类型的PDF, 不能编辑,清晰度很一般，仅满足基本要求。