| | |
| | | import * as pdfjsLib from 'pdfjs-dist'; |
| | | import { convertToHtml } from 'mammoth'; |
| | | import Vue from 'vue' |
| | | |
| | | export default { |
| | | methods: { |
| | | convertFileToHtml(file) { |
| | | const fileType = file.type.split('/')[1]; |
| | | const fileExtension = fileType === 'pdf' ? '.pdf' : '.docx'; |
| | | |
| | | // 将文件转换为Blob对象 |
| | | const fileReader = new FileReader(); |
| | | fileReader.onload = async (event) => { |
| | | const arrayBuffer = event.target.result; |
| | | const byteArray = new Uint8Array(arrayBuffer); |
| | | const blob = new Blob([byteArray], { type: fileType + fileExtension }); |
| | | |
| | | if (fileType === 'pdf') { |
| | | // 使用pdfjsLib将PDF转换为HTML |
| | | const 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转换为HTML |
| | | const htmlContent = `<img src="${base64Image}" />`; |
| | | return htmlContent; |
| | | } else if (fileType === 'docx') { |
| | | async convertFileToHtml(url) { |
| | | var xhr = new XMLHttpRequest(); |
| | | xhr.open('GET', Vue.prototype.javaApi+url, true);//获取文件流的接口 |
| | | xhr.send(); |
| | | xhr.responseType = "blob";//不能漏 |
| | | let xhrPromise = new Promise((resolve, reject) => { |
| | | xhr.onload = async function () { |
| | | if (this.status === 200) { |
| | | // 返回的文件流,转换成blob对象 |
| | | var blob = new Blob([this.response],{ type:'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); |
| | | // 使用mammoth将Word转换为HTML |
| | | const htmlContent = await convertToHtml(blob, { format: 'html' }); |
| | | return htmlContent; |
| | | let reader = new FileReader(); |
| | | reader.readAsArrayBuffer(blob); |
| | | let htmlContentPromise = new Promise((resolve, reject) => { |
| | | reader.onload = async function () { |
| | | var arrayBuffer = xhr.response; //arrayBuffer |
| | | const result = await convertToHtml({ arrayBuffer: arrayBuffer }) |
| | | let html = result.value.replace(//g, '') |
| | | .replace('<h1>', '<h1 style="text-align: center;">') |
| | | .replace(/<table>/g, '<table style="border-collapse: collapse;border: 1px solid #000;">') |
| | | .replace(/<tr>/g, '<tr style="height: 30px;">') |
| | | .replace(/<td>/g, '<td style="border: 1px solid #000;">') |
| | | .replace(/<p>/g, '<p style="text-indent: 2em;">') |
| | | .replace(/<a [^>]*>/g, "") |
| | | .replace(/<\/a>/g, "") |
| | | // .replace(/em/g, "cm"); |
| | | resolve(html) |
| | | }; |
| | | }) |
| | | resolve(await htmlContentPromise) |
| | | } |
| | | }; |
| | | fileReader.readAsArrayBuffer(blob); |
| | | }, |
| | | |
| | | } |
| | | }) |
| | | return await xhrPromise |
| | | }, |
| | | downloadIamge(imgsrc, name) {//下载图片地址和图片名 |
| | | var image = new Image(); |
| | | // 解决跨域 Canvas 污染问题 |
| | | image.setAttribute("crossOrigin", "anonymous"); |
| | | image.onload = function() { |
| | | var canvas = document.createElement("canvas"); |
| | | canvas.width = image.width; |
| | | canvas.height = image.height; |
| | | var context = canvas.getContext("2d"); |
| | | context.drawImage(image, 0, 0, image.width, image.height); |
| | | var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据 |
| | | |
| | | var a = document.createElement("a"); // 生成一个a元素 |
| | | var event = new MouseEvent("click"); // 创建一个单击事件 |
| | | a.download = name || "photo"; // 设置图片名称 |
| | | a.href = url; // 将生成的URL设置为a.href属性 |
| | | a.dispatchEvent(event); // 触发a的单击事件 |
| | | }; |
| | | image.src = imgsrc; |
| | | } |
| | | }; |