如何使用node实现在线预览office文档

微软方：利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件，然后再利用免费的swftools.exe工具生成swf格式的Flash文件，网页中加载flexpaper免费开源工具（有广告）实现Flash文件的预览。 优点： 1、有效的保护的源文件及文件的复制，不可复制也是缺点。 2、源码是自己的，版权有保证。 缺点： 1、服务器上必须安装Office软件。 2、导出PDF文件本身是个打印过程，Excel页面格式未设置，会出现一张表格打印出多页来，阅读体验大大下降。 3、转换过程非常耗费资源，低配的CPU几乎能跑满，服务器卡死。转换时间也非常漫长，这个时间主要是卡在了转换PDF上面。 4、转换完成服务器会遗轮枯闹留大量Excel、Word进程无法正常退出，有一些折中的解决办法，可以在网上搜索。 5、设置非常麻烦，本身微软官败肆方的说法Office软件是客户端程序，在与IIS交互的时候本身就未设计。所以很多程序员把精力浪费在了调试程序上面。有两点在调试的时候需要注意。一个是腊罩在web.config中设置 <identity impersonate="true" userName="administrator" password="你的服务器管理员密码" />，一个是在Office软件的设置中设置跟桌面交互。 6、严重浪费磁盘空间，一个文件还需要一个PDF文件、一个SWF文件，是否每次都转换，纠结是要硬盘空间呢还是要CPU的资源。

import styles from './style.scss'// 自定义样式，文件名中锋称不可修改

import { Button, Upload, Modal, Alert } from 'antd'

import React, { Children, cloneElement, isValidElement, useState, useEffect, useRef } from 'react'

import axios from 'axios'

const Previewer = ({ url, onClose, isEditing, onEditSave }) =>{

    return (

        <Modal className={styles.modalshow} title={isEditing ? "文档编辑" : "文档预览"} visible width={1200} onCancel={onClose} footer={

            isEditing ? [

                <Button key="back" onClick={onClose}>

                    返回

                </Button>,

                <Button key="submit" type="primary" onClick={onEditSave}>

                    提交

                <镇贺/Button >

            ] : null} >

            <iframe src={url} title='wps' width='100%' height='592' />

        </Modal >

    )

}

const mapDOMTree = (children, matchChild) =>{

    if (typeof children === 'function') return null

   卖旅晌 return Children.map(children, (child) =>{

        if (!child) return null

        if (matchChild(child)) return matchChild(child)

        return isValidElement(child) ? cloneElement(child, child.props, mapDOMTree(child.props.children, matchChild)) : child

    })

}

const baseUrl2 = getUrl('/contract/api/xft-contract-procode/object/v1/attachments/service/create-uri-by-id')

function CUpload({ onPreview, onEdit, onEditSave, children, showDownloadIcon = true, showRemoveIcon = true, showEditButton = true, showPreviewIcon = true, ...rest }) {

    const [visible, setVisible] = useState(false)

    const [url, setUrl] = useState()

    const [editing, setEditing] = useState(false)

    const toggle = () =>{

        setVisible(prevVisible =>!prevVisible)

    }

    const onPreviewFile = async (file) =>{

        const previerUrl = await onPreview?.(file)

        setUrl(previerUrl)

        toggle()

    }

    const onEditFile = async (file) =>{

        const previerUrl = await onEdit?.(file)

        setUrl(previerUrl)

        setEditing(true)

        toggle()

    }

    const handleUpload = files =>{

        return {

            fileName: files.name,

            fileType: files.type

        }

    }

    const onClose = () =>{

        setEditing(false)

        toggle()

    }

    const downloadd = (file) =>{

        axios.post(`${baseUrl2}?id=${file.id} `)

            .then(res =>{

                let data = res.data.data

                download(data.tempUri, data.fileName)

            }

            ).catch((error) =>{

                Modal.showServeError(error)

            })

    }

    const download = (url, fileName) =>{

        // for IE

        // if (window.navigator.msSaveOrOpenBlob) {

        //     window.navigator.msSaveOrOpenBlob(url, fileName)

        // } else {

        const link = document.createElement('a')

        link.style.display = 'none'

        link.href = url

        link.download = fileName

        // document.body.appendChild(link)

        link.click()

        // window.URL.revokeObjectURL(link.href)

        link.remove()

        // }

    }

    const editClose = async () =>{

        await onEditSave()

        onClose()

    }

    const baseUrl = getUrl('contract/api/xft-contract-procode/object/v1/attachments')

    return (

        <>

            <Upload

                {...rest}

                maxCount={1}

                data={handleUpload}

                accept='application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword'

                action={baseUrl}

                showUploadList={{

                    showDownloadIcon,

                    showRemoveIcon,

                }}

                onDownload={downloadd}

                itemRender={(originNode, file) =>{

                    if (originNode.type !== 'div' || !showPreviewIcon) return originNode

                    return mapDOMTree(originNode, (children) =>{

                        if (children.key === 'download-delete') {

                            return cloneElement(

                                children,

                                children.props,

                                <>

                                    <Button

                                        type="text"

                                        size="small"

                                        onClick={() =>onPreviewFile(file)}

                                        className="ant-upload-list-item-card-actions-btn"

                                        icon={<EyeOutlined />}

                                        title="Preview File"

                                    />

                                    {showEditButton &&<Button

                                        type="text"

                                        size="small"

                                        onClick={() =>onEditFile(file)}

                                        className="ant-upload-list-item-card-actions-btn"

                                        icon={<EditOutlined />}

                                        title="Edit File"

                                    />}

                                    {children.props.children}

                                </>,

                            )

                        }

                        return false

                    })

                }}

            >{children}</Upload>

            {visible &&<Previewer url={url} onClose={onClose} isEditing={editing} onEditSave={editClose} />}

        </>

    )

}

export default function UploadButton(props) {

    const { setValue, id, mingzi, formItemValue, setPrinstineValue, isEdit } = props

    const [list, setList] = useState([])

    const editingRef = useRef(false)

    console.log('props--', props)

    useEffect(() =>{

        if (formItemValue?.fileId) {

            setList([{ ...formItemValue, name: formItemValue?.fileName, id: formItemValue?.fileId, status: 'done' }])

        }

    }, [formItemValue])

    const onChange = (info) =>{

        console.log('info---', info)

        if (info.file.status === 'done') {

            setValue({ [id]: info.file.response.data.data, [mingzi]: info.fileList[0].name })

        }

        if (info.file.status === 'removed') {

            setPrinstineValue(undefined)

            setValue(undefined)

        }

        setList(info.fileList)

    }

    const onPreview = (e) =>{

        editingRef.current = false

        return Http.get('/contract/api/xft-contract-procode/common/v1/preview?attachId=' + e.fileId).then(res =>res.data.data.data).catch((error) =>{

            Modal.showServeError(error)

        })

    }

    const onEdit = (e) =>{

        editingRef.current = true

        return Http.get(`/contract/api/xft-contract-procode/contract/v1/institution/file/onlineEdit?attachId=${props.formItemValue?.fileId}&id=${props.data.__super.id}`).then(

            res =>res.data.data.data).catch((error) =>{

                Modal.showServeError(error)

            })

    }

    const onEditSave = () =>{

        if (editingRef.current) {

            editingRef.current = false

            return Http.get(`/contract/api/xft-contract-procode/common/v1/complete/fileEdit/${props.formItemValue?.fileId}`)

        }

    }

    const uploadButton = <Button>上传</Button>

    return (

        <CUpload

            onPreview={onPreview}

            onEdit={onEdit}

            onEditSave={onEditSave}

            onChange={onChange}

            fileList={list}

            showRemoveIcon={isEdit}

            showEditButton={isEdit}

        >

            {list.length >= 1 ? null : uploadButton}

        </CUpload>

    )

}

你这个问题比较专业，回答起来比较麻烦，我们先来理一理该如何去解决问题，问题是：你是向要将PDF文件进行在线打开，去发现无法将文件进行打开。

原因可能是：

1.你的PDF文件和电脑起到盯裤谈冲突的原因

2.可能是文件在接收或凯碰者在下载的时候收到损坏！

如果是这个问题的话那就简单，小编可以教你使用一个方法可以将它解决！

1.其实我们可以使用在线PDF转换器就可以了，不仅可以对它进行在线的阅读，还可以对它进行其他格式的在线转换或者PDF文件的编辑！

2.我们打开网站之后就可以将文件进行上传上去，但是要记住，文件大小不要超过2M，然后进行上传！

3.点击上传之后我们就可以看到文件，然后我纯顷们就可以对文件进行阅读或者将不足的地方进行编辑，达到完善的结果！

以上就是我的个人见解，希望对小伙伴们有所帮助！

---