vue PDF或Word转换为HTML并保留原有样式

方法一

要将PDF或Word转换为HTML并保留原有样式，可以使用pdfjs-dist和mammoth.js这两个库。首先需要安装这两个库：

npm install pdfjs-dist mammoth.js

然后在Vue项目中使用这两个库进行转换：

import * as pdfjsLib from 'pdfjs-dist';
import { convertToHtml } from 'mammoth';export default {methods: {async convertFileToHtml(file) {const fileType = file.type.split('/')[1];const fileExtension = fileType === 'pdf' ? '.pdf' : '.docx';// 将文件转换为Blob对象const fileReader = new FileReader();fileReader.onload = (event) => {const arrayBuffer = event.target.result;const byteArray = new Uint8Array(arrayBuffer);const blob = new Blob([byteArray], { type: fileType + fileExtension });if (fileType === 'pdf') {// 使用pdfjsLib将PDF转换为HTMLconst pdfData = await pdfjsLib.getDocument(blob).promise;const pageNumber = 1;const scale = 1;const viewport = pageNumber * scale;const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = pdfData.internal.pageSize.getWidth() * scale;canvas.height = pdfData.internal.pageSize.getHeight() * scale;const renderContext = {canvasContext: context,viewport: viewport,};const renderTask = pdfData.getPage(pageNumber).render(renderContext);await renderTask.promise;const base64Image = canvas.toDataURL('image/png');// 将base64Image转换为HTMLconst htmlContent = `<img src="${base64Image}" />`;return htmlContent;} else if (fileType === 'docx') {// 使用mammoth将Word转换为HTMLconst htmlContent = await convertToHtml(blob, { format: 'html' });return htmlContent;}};fileReader.readAsArrayBuffer(blob);},},
};

在Vue模板中使用这个方法：

<template><div><input type="file" @change="handleFileChange" /></div>
</template><script>
import convertFileToHtml from '@/utils/convertFileToHtml';export default {methods: {...convertFileToHtml(),},
};
</script>

方法二

要实现在Vue中复制Word文档并还原样式，可以使用mammoth.js库将Word文档转换为HTML,然后使用html-to-paper库将HTML内容呈现为可打印的PDF。以下是实现此功能的步骤：

1.安装依赖库：

npm install mammoth html-to-paper

2.在Vue组件中引入依赖库：

import * as mammoth from 'mammoth';
import htmlToPaper from 'html-to-paper';

3.创建一个方法来处理Word文档的上传和预览：

methods: {async handleWordUpload(event) {const file = event.target.files[0];if (!file) {return;}// 将Word文档转换为HTMLconst result = await mammoth.convertToHtml({ arrayBuffer: file });const htmlContent = result.value;// 将HTML内容呈现为可打印的PDFconst printElement = document.createElement('div');printElement.innerHTML = htmlContent;htmlToPaper(printElement);},
},

4.在Vue模板中添加一个文件输入框和预览按钮：

<template><div><input type="file" @change="handleWordUpload" /><button>预览</button></div>
</template>