vue实现Word转PDF
Vue 中实现 Word 转 PDF 的方法
前端方案（依赖后端转换）
前端无法直接完成 Word 到 PDF 的转换，通常需要调用后端服务或第三方 API。以下是基于 Vue 的实现方案：
安装依赖
npm install axios # 用于调用后端接口前端代码示例
<template>
<div>
<input type="file" @change="handleFileUpload" accept=".doc,.docx" />
<button @click="convertToPdf">转换为PDF</button>
<a v-if="pdfUrl" :href="pdfUrl" download>下载PDF</a>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
pdfUrl: null
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
async convertToPdf() {
if (!this.file) return;
const formData = new FormData();
formData.append('file', this.file);
try {
const response = await axios.post('YOUR_BACKEND_API_URL', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
responseType: 'blob'
});
this.pdfUrl = URL.createObjectURL(new Blob([response.data]));
} catch (error) {
console.error('转换失败:', error);
}
}
}
};
</script>后端实现方案（Node.js 示例）
安装依赖
npm install express multer @libreoffice/convert后端代码示例
const express = require('express');
const multer = require('multer');
const libre = require('@libreoffice/convert');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/convert', upload.single('file'), (req, res) => {
if (!req.file) return res.status(400).send('未上传文件');
const extend = path.extname(req.file.originalname).toLowerCase();
if (!['.doc', '.docx'].includes(extend)) {
return res.status(400).send('仅支持Word文档');
}
libre.convert(req.file.path, '.pdf', undefined, (err, done) => {
if (err) return res.status(500).send('转换失败');
res.setHeader('Content-Type', 'application/pdf');
res.send(done);
});
});
app.listen(3000, () => console.log('服务已启动'));纯前端方案（局限性较大）
使用 docx.js + pdf-lib 可实现简单文档转换，但复杂格式会丢失：
npm install docx pdf-lib代码示例
import { Document, Packer } from 'docx';
import { PDFDocument } from 'pdf-lib';
async function convertSimpleDocxToPdf(docxContent) {
const doc = new Document();
const buffer = await Packer.toBuffer(doc);
const pdfDoc = await PDFDocument.create();
const page = pdfDoc.addPage();
// 简单文本写入（实际需复杂解析）
page.drawText('需实现docx内容解析逻辑');
return await pdfDoc.save();
}第三方 API 方案
- Microsoft Graph API（需 Azure 订阅）
- Cloudmersive API（免费版有限额）
- Aspose.Words API（付费服务）
调用示例：
axios.post('https://api.cloudmersive.com/convert/autodetect/to/pdf',
formData,
{ headers: { 'Apikey': 'YOUR_API_KEY' } }
)注意事项
- 后端方案需要安装 LibreOffice 或 Microsoft Word
- 复杂文档格式（如图表、页眉页脚）在前端方案中难以完美保留
- 生产环境建议使用专业文档转换服务（如 Aspose）
