当前位置：首页 > news >正文

react项目实现文件预览，比如PDF、txt、word、Excel、ppt等常见文件（腾讯云cos）

news 2025/9/16 7:43:39

使用腾讯云文档预览，需要开通文档预览功能，该功能需要收费的。

使用限制
在这里插入图片描述

在这里插入图片描述

如果需要图片预览、视频或音频可以使用获取下载链接。

页面代码

	<button onClick=() => {handleClick('myself/文档.xlsx')}>预览</button><div style={{ height: 400, width: 700 }}><iframe height={400} width={700}src={preurl}></iframe></div>

const [preurl,setPreurl] = useState('')const handleClick = (key) => {getPreUrl(key).then((res) => {setPreurl(res);
})}

使用cos获取预览文档链接

let COS = require('cos-js-sdk-v5');const COS_DATA = {Bucket: '', /* 存储桶，必须 */Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */SecretId: '',SecretKey: '',
}// SECRETID 和 SECRETKEY 请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
let cos = new COS({SecretId: COS_DATA.SecretId,SecretKey: COS_DATA.SecretKey,
});export const getPreUrl = (key) => new Promise((resolve, reject) => {cos.getObjectUrl({Bucket: COS_DATA.Bucket, // 填入您自己的存储桶，必须字段Region: COS_DATA.Region, // 存储桶所在地域，例如 ap-beijing，必须字段Key: key, // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），支持中文，必须字段Sign: true, // 获取带签名的对象 URLQuery: {'ci-process': 'doc-preview', /* 必须，数据万象处理能力，文档预览固定为 doc-preview */dstType: 'html',}},function (err, data) {if (err) { reject(err);}resolve(data.Url);});
});