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

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

使用限制

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

页面代码

	<button 
		onClick=() => {
		handleClick('myself/文档.xlsx')
		}>
	预览</button>
      <div style={{ height: 400, width: 700 }}>
        <iframe height={400} width={700}
          src={preurl}
        >
        </iframe>
      </div>
1
2
3
4
5
6
7
8
9
10
11

const [preurl,setPreurl] = useState('')

const handleClick = (key) => {
	getPreUrl(key).then((res) => {
	setPreurl(res);
})

}
1
2
3
4
5
6
7
8

使用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, // 获取带签名的对象 URL
      Query: {
        'ci-process': 'doc-preview', /* 必须，数据万象处理能力，文档预览固定为 doc-preview */
        dstType: 'html',
      }
    },
    function (err, data) {
      if (err) { 
        reject(err);
      }
      resolve(data.Url);
    }
  );
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

文档图片预览：https://bucketname.cos.ap-shanghai.myqcloud.com/filename?ci-process=doc-preview&page=1，

详情可查看 文档图片预览API文档

文档HTML预览：https://bucketname.cos.ap-shanghai.myqcloud.com/filename?ci-process=doc-preview&dstType=html，详情可查看 文档HTML预览API文档

更详细内容查看https://cloud.tencent.com/document/product/460/47495