数据万象
有奖捉虫：行业应用 & 管理与支持文档专题 HOT
文档中心 > 数据万象 > 最佳实践 > 文档处理实践 > 小程序快速集成文档预览

小程序快速集成文档预览

最近更新时间：2023-06-02 11:19:55

我的收藏

本页目录：

简介

本文将介绍在微信小程序中如何通过 腾讯云数据万象（CI） 提供的文档预览功能，实现文档转 HTML 预览与文档转图片预览，您可根据自身需求接入不同类型的文档预览服务。

预览服务对比

本文采用同步方式接入文档预览服务，如您有更多需求，可以了解两种预览服务的异步接入方式：文档转 HTML 预览（异步） 和 文档转图片预览（异步）。
预览服务
效果
特点
适用场景
文档转 HTML 预览（同步方式）
转 HTML 预览，支持文档播放/翻页/全屏等功能。
接入简单，功能丰富，兼容多种文档格式。
高度还原文档样式，适用于文档格式复杂的场景。
文档转图片预览（同步方式）
转图片预览，支持图片缩放/裁剪/旋转/水印等处理。
实时在线预览，支持对生成的图片进行基础图片处理，使用简单。
比较适用于实时的 word/pdf 文档预览场景。
说明
关于费用介绍，请参见 文档处理费用。

文档转 HTML 预览

步骤1：获取文档转 HTML 预览链接

1. 创建一个存储桶
2. 开通文档预览
3. 上传文档文件
4. 获取文档对象地址，格式为：https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>。
5. 拼接文档预览链接。需在文档对象地址后拼接 ci-process=doc-preview&dstType=html，即：https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>?ci-process=doc-preview&dstType=html 。您可根据自身需求决定是否继续拼接其他 请求参数。
说明
若存储桶为私有读写，则对象地址需要携带签名，详情请参见 请求签名。
若存在跨域问题，则需要进行存储桶跨域访问 CORS 设置，详情请参见 设置跨域访问。

步骤2：配置业务域名

1. 登录 微信公众平台 。
2. 单击 开发 > 开发管理 > 开发设置，找到业务域名部分，单击修改，新增两个业务域名并保存。需新增的两个业务域名如下：
https://<BucketName-APPID>.cos.<Region>.myqcloud.com ：您需要进行文档转 HTML 预览的对象存储域名。
https://prvsh.myqcloud.com ：文档转 HTML 预览底层服务域名。



3. 下载校验文件至本地，并将文件放置在域名根目录下。
登录控制台，进入相应存储桶根目录下，上传校验文件，设置该校验文件访问权限为公有读。
联系我们 为您在 https://prvsh.myqcloud.com 域名下上传校验文件。
详情请参见 业务域名说明。
说明
关于是否需要配置业务域名，您可根据自身情况进行选择。如果只是个人在本地调试，可以在 微信开发者工具 > 详情 > 本地设置 中勾选 “不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”，可不必配置业务域名。如果想要发布上线，那么必须有相应企业小程序并且配置业务域名。

步骤3：使用 webview 实现文档转 HTML 预览

1. 在 微信开发者工具 中，新建一个微信小程序。
2. 页面中使用 web-view 组件实现内嵌文档预览页面。此处的 url 为文档转 HTML 预览链接。
<web-view src="{{url}}"></web-view>
获取示例代码：
微信小程序 - 文档转 HTML 预览示例代码

文档转图片预览

步骤1：获取文档转图片预览链接

1. 创建一个存储桶
2. 开通文档预览
3. 上传文档文件
4. 获取文档对象地址，格式为：https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>。
5. 拼接文档预览链接。需在文档对象地址后拼接 ci-process=doc-preview，即：https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>?ci-process=doc-preview 。您可根据自身需求决定是否继续拼接其他 请求参数 。文档转图片预览支持 基础图片处理 处理参数，您可拼接 ImageParams 参数在预览时对图片进行处理。
说明
若存储桶为私有读写，则对象地址需要携带签名，详情请参见 请求签名 。
若存在跨域问题，则需要进行存储桶跨域访问 CORS 设置，详情请参见 设置跨域访问。

步骤2：配置 downloadFile 合法域名

1. 登录 微信公众平台 。
2. 单击 开发 > 开发管理 > 开发设置，找到服务器域名部分，修改 downloadFile 合法域名。



3. 在 downloadFile 合法域名中新增域名 https://<BucketName-APPID>.cos.<Region>.myqcloud.com ，即您需要进行文档转图片预览的对象存储域名。保存配置。详情请参见 服务器域名配置。

步骤3：实现文档转图片预览

1. 在 微信开发者工具 中，新建一个微信小程序。
2. 使用 wx.downloadFile 下载文档图片资源到本地。可从请求结果中获取文档总页数与临时图片地址。此处的 url 为文档转图片预览链接，例如 https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<文档格式>?ci-process=doc-preview&page=1&dstType=png 。
wx.downloadFile({
    url,
    method: "GET",
    success(res) {
        const totalPage = Number(res?.header["X-Total-Page"]) || 0;
        const imageUrl = res?.tempFilePath || '';
    },
    fail(err) {
        console.log(err);
    }
});
3. 页面加载文档图片，实现文档转图片预览。imageUrl 即下载的临时图片地址。
<image src="{{imageUrl}}"></image>
4. 您可自定义文档转图片预览页面结构与效果，例如一次性请求或者以懒加载的方式请求文档的预览图片，使用 swiper 组件实现文档转图片预览的滑动翻页效果。
获取示例代码：
微信小程序 - 文档转图片预览示例代码

Demo 体验

您可使用微信扫描下方的小程序码，在文档预览栏目中使用示例文件或自行上传文件，可分别体验小程序中文档转 HTML 预览与文档转图片预览的实际效果。


中国站