Rails 4.2.5+Ruby2.3.3下Paperclip上传Word文件无法正常预览求助

我之前也碰到过类似的问题，用Rails 4.2.5 + Ruby 2.3.3搭配Paperclip做文件上传时，PDF能正常在浏览器iframe里预览，但Word文件就是显示不出来——核心原因其实是浏览器本身没有内置Word文件的原生渲染引擎，得换几种思路来解决，下面给你几个实用的方案：

方案一：借助Google文档预览服务（最简单快速） #

Google提供了免费的文档预览接口，能帮我们渲染Word、PDF等多种格式的文件，直接把文件URL传给这个接口就行。修改你的详情页iframe代码：

<iframe 
  src="https://docs.google.com/viewer?url=<%= CGI.escape(@article.document.url) %>&embedded=true" 
  width="100%" 
  height="600px" 
  frameborder="0"
></iframe>

注意事项： #

• 要确保你的上传文件是公开可访问的：如果是用本地存储，要确认Paperclip的存储目录在Rails的静态资源路径下；如果是用S3等云存储，要给文件设置公开读权限。
• 这个方案依赖Google的服务，如果用户网络访问不了Google，就没法用了。

方案二：服务器端转换Word为PDF（最可控） #

如果不想依赖外部服务，我们可以在服务器端把上传的Word文件转换成PDF，然后预览PDF版本。这里推荐用unoconv工具（基于LibreOffice）来做转换：

步骤1：安装依赖 #

在Ubuntu服务器上执行：

sudo apt-get install unoconv libreoffice

步骤2：在模型里添加转换回调 #

修改你的Article模型，添加上传后的转换逻辑：

has_attached_file :document
has_attached_file :pdf_document # 新增一个附件字段存转换后的PDF

validates_attachment :document, :content_type => { 
  :content_type => %w(application/pdf application/msword application/vnd.openxmlformats-officedocument.wordprocessingml.document) 
}

after_save :convert_word_to_pdf, if: -> { document.content_type.in?(['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']) }

private

def convert_word_to_pdf
  return if pdf_document.exists? # 避免重复转换

  input_path = document.path
  output_path = input_path.gsub(File.extname(input_path), '.pdf')

  # 执行转换命令
  system("unoconv -f pdf #{input_path}")

  # 把转换后的PDF附加到模型
  if File.exist?(output_path)
    self.pdf_document = File.open(output_path)
    save(validate: false)
    File.delete(output_path) # 临时文件可以删掉
  end
end

步骤3：修改详情页代码 #

优先展示转换后的PDF，如果没有就用原文件：

<% if @article.pdf_document.exists? %>
  <iframe src="<%= @article.pdf_document.url %>" width="100%" height="600px" frameborder="0"></iframe>
<% else %>
  <iframe src="<%= @article.document.url %>" width="100%" height="600px" frameborder="0"></iframe>
<% end %>

方案三：前端解析Word内容（适合轻量预览） #

如果只需要展示Word里的文本内容，不需要完整格式，可以用前端库mammoth.js来解析Word文件：

在你的详情页添加以下代码：

<div id="word-content-preview" style="padding: 20px;"></div>

<script src="https://unpkg.com/mammoth@1.4.21/mammoth.browser.min.js"></script>
<script>
  // 获取Word文件并解析
  fetch('<%= @article.document.url %>')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => mammoth.convertToHtml({arrayBuffer: arrayBuffer}))
    .then(result => {
      document.getElementById('word-content-preview').innerHTML = result.value;
      // 可以处理解析过程中的警告
      result.messages.forEach(message => console.warn(message));
    })
    .catch(error => console.error('Word文件解析失败:', error));
</script>

这个方案的好处是不需要服务器端配置，但缺点是没法完全还原Word的复杂格式（比如表格、图片可能显示有问题）。

内容的提问来源于stack exchange，提问作者Joao Quaresma