在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, 不能编辑,清晰度很一般,仅满足基本要求。