前台js有没有办法实现附件比如word或者pdf的预览？ Nodejs相关解决方案探讨

前台js有没有办法实现附件比如word或者pdf的预览？就是上传了一个附件，鼠标移上去就能显示一个类似tip的页面来显示附件的内容

   只显示第一页缩略图也行 因为一般第一页就有文档的标题甚至概要之类的 请问后台产生图片这个有没有好的点子？ 我自己查到的有转pdf再转swf的 也有用weboffice的 也听说可以用POI 有没有这方面经验呢？

vueper 1楼•2 个月前作者

当然可以。前端和后端可以通过多种方式来实现文件（如Word或PDF）的预览功能。以下是一个简要的解决方案，包括前端和后端的技术栈选择以及示例代码。

前端方案

对于PDF文件的预览，可以使用PDF.js库。对于Word文档，可以先将其转换为PDF格式，然后再进行预览。

示例代码（PDF预览）

引入PDF.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.349/pdf.min.js"></script>

创建一个简单的HTML结构用于显示PDF预览：

<div id="pdf-preview"></div>

使用JavaScript加载并渲染PDF文件：

function loadPdf(url) {
    pdfjsLib.getDocument(url).promise.then(function(pdf) {
        pdf.getPage(1).then(function(page) {
            var scale = 0.5;
            var viewport = page.getViewport({scale: scale});
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
            document.getElementById('pdf-preview').appendChild(canvas);
        });
    });
}

loadPdf('/path/to/your/document.pdf');

后端方案

为了将Word文档转换为PDF，可以使用Node.js库，如office-converter。首先需要安装该库：

npm install office-converter

然后编写一个简单的Node.js服务来处理文件转换和预览请求：

const express = require('express');
const OfficeConverter = require('office-converter');

const app = express();
const converter = new OfficeConverter();

app.post('/convert', (req, res) => {
    const inputPath = req.body.inputPath; // 假设这是上传的Word文件路径
    const outputPath = '/tmp/output.pdf';

    converter.convert(inputPath, outputPath, (err) => {
        if (err) return res.status(500).send(err);

        // 返回生成的PDF路径
        res.send({pdfPath: outputPath});
    });
});

app.listen(3000, () => console.log('Server running on port 3000'));

这样，前端发送一个POST请求到后端，将Word文件转换为PDF，并返回PDF路径给前端，前端再使用上述PDF预览代码展示预览内容。

通过这种方式，你可以实现Word或PDF文件的预览功能，既高效又实用。

gougou168 2楼•2 个月前

纯js肯定不行，需要后端生成附件的缩略图。但是只有第一页的缩略图的话，也是没什么意义的……

ionicwang 3楼•2 个月前

目前想到就显示第一页缩略图也行因为一般第一页就有文档的标题甚至概要之类的请问后台产生图片这个有没有好的点子？我自己查到的有转pdf再转swf的也有用weboffice的也听说可以用POI 有没有这方面经验呢？

caililin 4楼•2 个月前

哦哦好我再去琢磨琢磨谢啦~

sinazl 5楼•2 个月前

qq邮箱有 word，pdf (chrome 原生支持) 的在线预览，但是没有采用类似于 flexpaper 的方案；很好奇

yibo5220 6楼•2 个月前

pdf，可以直接用浏览器浏览的

vueper 7楼•2 个月前作者

word文档，你可以尝试使用一些富文本编辑器，它们里面可以解析。具体什么名字忘了，一个是国内用的比较广泛的，一个是google的

sinazl 8楼•2 个月前

https://view.officeapps.live.com/op/view.aspx?src=你的文件地址

ionicwang 9楼•2 个月前

要在前端使用JavaScript实现Word或PDF文件的预览，可以通过几种不同的方法来实现。这里主要介绍两种常用的方法：一种是通过第三方服务将PDF或Office文档转换为可嵌入HTML的格式（如SVG、Canvas），另一种是利用一些专门为此目的设计的库。

方法1：使用PDF.js预览PDF文件

对于PDF文件，可以使用Mozilla的PDF.js库。这是一个强大的开源项目，能够解析并渲染PDF文件，同时可以在浏览器中直接显示PDF内容。

示例代码：

首先需要引入PDF.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.270/pdf.min.js"></script>

然后创建一个简单的预览功能：

function renderPdf(url) {
    pdfjsLib.getDocument(url).promise.then(function(pdfDoc) {
        pdfDoc.getPage(1).then(function(page) {
            var scale = 0.5;
            var viewport = page.getViewport({ scale: scale });
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    });
}

renderPdf('/path/to/your/document.pdf');

方法2：使用Office预览器或转换工具

对于Word等Office文档，可以考虑先将其转换成PDF或其他易于处理的格式，然后再使用类似的方法进行预览。这通常需要服务器端的支持。

例如，可以使用libreoffice命令行工具将Word文档转换为PDF格式，然后使用上述PDF.js方法进行预览。

后台Node.js服务示例：

若要在Node.js中使用libreoffice转换工具，可以安装node-libreoffice包：

npm install node-libreoffice --save

然后编写简单的转换脚本：

const libre = require('node-libreoffice');

libre.convert('/path/to/your/document.docx', '/output/path/document.pdf')
    .then((res) => {
        console.log("Converted successfully");
    })
    .catch((err) => {
        console.error(err);
    });

这种方法需要确保系统上已安装libreoffice及其所需的依赖项。

这两种方法都能有效地实现Word和PDF文件的预览，选择哪一种取决于具体需求以及所使用的平台和环境。